为何Tailwind响应式grid在浏览器调试模式正常但实体设备不生效

故障原因及解决方案 #

• 首要排查项：确认页面<head>标签内是否添加了移动端适配必备的viewport元标签

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  

  缺少该标签时，iOS Safari会默认按980px宽度渲染页面，页面整体会被缩放，宽度超过Tailwind默认md断点的768px阈值，就会触发桌面端网格布局，不会走小屏块布局规则，就会出现调试模式正常、实体设备异常的情况。
• 第二适配项：处理iOS Safari对h-screen的兼容问题
  你代码中用到的h-screen对应CSS100vh，iOS Safari计算100vh时会忽略自带的地址栏、底部工具栏高度，容易出现元素高度溢出、布局错位的问题。如果是Tailwind v3版本可直接替换为min-h-[100dvh]适配动态视口高度，v2版本可自定义动态视口高度工具类，或根据实际布局需求给元素添加适配的安全边距。
• 优化建议：你当前给所有子元素设置的h-screen是全局生效的，移动端块布局下每个元素都会占满整屏高度，若不符合你的布局预期，可将h-screen修改为响应式规则md:h-screen，仅在桌面端生效。

内容的提问来源于stack exchange，提问作者MoPaMo