viewport meta标签必须写对且置于<head>最顶部，标准写法为<meta name="viewport" content="width=device-width, initial-scale=1.0">，缺一不可；错误写法如width=deviceWidth、width=375或漏initial-scale=1.0会导致文字小、点击偏移、横向滚动等问题。
viewport meta 标签必须写对且放最前
没它，页面在手机上基本就废了——文字小得看不清、按钮点不中、横向滚动条出现，八成是这行漏了或写错。<meta name="viewport" content="width=device-width, initial-scale=1.0"> 必须出现在 <head> 最顶部，早于所有 CSS 和 JS。
常见错误包括：width=deviceWidth（少个连字符）、width=375（固定值，横屏直接崩）、漏掉 initial-scale=1.0（iOS 会按 980px 渲染再缩放，touch 事件坐标错位）；别加 maximum-scale=1.0 或 user-scalable=no，除非是自助终端机，否则违反可访问性要求。
用 rem + calc() 前置设置根字体，别等 JS 执行
靠 document.documentElement.style.fontSize 在 DOMContentLoaded 里设 rem 基准，会导致闪屏：先按浏览器默认 16px 渲染，再重绘。真机上用户一眼就能看出文字“跳变”。
正确做法是在 <head> 内联 <style>，用 calc() 直接算死：html { font-size: calc(100vw / 375 * 16px); }（以 375px 设计稿为基准）。注意 Safari 旧版本不支持 1rem 混入 calc()，单位必须统一为 px。
立即学习“前端免费学习笔记（深入）”；
Flex 和 Grid 别混在同一个容器里
Flex 适合一维排列（比如导航栏、卡片横排），Grid 适合二维区域划分（比如后台仪表盘）。把 display: flex 容器里再塞一个 display: grid 子元素做主布局，语义混乱，调试困难，Android 4.4 WebView 还可能忽略 flex-wrap 或 grid-gap。
实操建议：
• 导航栏用 Flex：小屏 flex-direction: column，大屏用媒体查询切回 row
• 内容区用 Grid：grid-template-columns: minmax(300px, 1fr) 2fr，比纯百分比更可控
• 老 iOS（如 iOS 12）会无视 min-width，改用 flex-shrink: 0 或 width: max-content
媒体查询只按 width 断点，会漏掉横屏和小高度场景
只写 @media (min-width: 1024px)，iPad 横屏时照样堆叠、表单被键盘顶飞。因为横屏时宽度达标，但高度严重不足，内容没空间展开。
关键补丁：
• 横竖屏区分必须显式写：@media (min-width: 768px) and (orientation: landscape)
• 高度敏感组件（弹窗、登录框）加 @media (max-height: 600px) 单独调 padding 和 font-size
• 别用 max-device-width：它查的是设备物理宽度，已废弃；实际应基于视口宽度，用 max-width
真正卡住人的从来不是某个 API 不会用，而是 viewport 写错导致整个链路失效，或者在老 iOS 上死磕 min-width 却不知道 flex-shrink: 0 就能绕过。真机测试时，优先测横屏、小高度、双击放大后尺寸是否稳定，这些地方最容易暴露逻辑断层。
