最稳妥的 viewport 写法是：，其中 width=device-width 匹配设备逻辑像素，initial-scale=1.0 防 ios 自动缩放，user-scalable=no 避免布局错乱。
viewport meta 标签怎么写才不翻车
移动端页面一打开就缩成一团、文字小得看不清，八成是 viewport 没配对。最稳妥的写法是：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
关键点在于：width=device-width 让页面宽度匹配设备逻辑像素，不是物理像素；initial-scale=1.0 防止 iOS Safari 自动缩放标题；user-scalable=no 虽然体验有争议，但能避免双击放大后布局错乱——尤其表单输入时容易触发误操作。
常见错误：
- 漏掉
width=device-width，导致页面按 980px 渲染（iOS 默认） - 写了
maximum-scale=1.0却没配initial-scale=1.0，部分安卓浏览器会忽略 - 用
width=375这类固定值，直接在大屏手机上横向滚动
CSS 中 rem 适配为什么 px 值总不对
用 rem 做等比缩放，核心是动态改 html 的 font-size，而不是靠媒体查询硬写断点。常见做法是 JS 在页面加载和 resize 时执行：document.documentElement.style.fontSize = window.innerWidth / 375 * 16 + 'px';（以 375px 设计稿为基准）
立即学习“前端免费学习笔记（深入）”；
注意几个坑：
- iOS 键盘弹出时
window.innerWidth不变，但视口被压缩，rem基准会“虚高”，输入框可能被顶出屏幕 - 某些安卓 WebView 不触发
resize，得监听orientationchange或用matchMedia -
16px是默认字号，但用户手动调过系统字体大小时，rem会叠加缩放，建议加text-size-adjust: 100%抑制
flex 布局在 iOS 8–11 上为啥塌陷
老 iOS 的 WebKit 对 flex 支持不全，典型表现是子元素高度为 0、flex: 1 失效、align-items: center 不居中。根本原因是未声明 display: -webkit-flex 和对应前缀属性。
实操建议：
- 必须补全前缀：
display: -webkit-flex; display: flex; -
flex: 1拆成-webkit-flex: 1; flex: 1;，否则 iOS 9 下直接失效 - 避免只用
height: 100%依赖父容器高度，老 iOS 不继承 flex 容器的 height，改用min-height: 100vh更稳 - 慎用
flex-wrap: wrap+align-content，iOS 10 以下基本不认
图片和字体在高清屏上发虚怎么救
不是所有“2x”图都自动生效，关键看是否被 CSS 正确引用或 HTML 属性触发。优先级从高到低：HTML 的 srcset > CSS image-set() > 媒体查询 @media (-webkit-min-device-pixel-ratio: 2)。
字体发虚多数因为用了非系统字体且没开抗锯齿：-webkit-font-smoothing: antialiased; 只对 WebKit 有效；font-smooth: always; 已废弃；更通用的是加 text-rendering: optimizeLegibility;。
还要注意：
-
background-image: url(img@2x.png)不会自动切，必须配合@media手动切换 - SVG 图标在 iOS 12 以下有渲染 bug，建议用
<img src="icon.svg" alt="html移动端页面怎么做_html移动端适配技巧【实操】" >而非background-image - Web 字体加载期间闪动，加
font-display: swap;，但 iOS 10 不支持，得 fallback 到系统字体
真要兼容到 iOS 9，别信“一套代码跑所有”，viewport、rem、flex、高清图这四块，每一块都有独立的降级路径。漏掉任何一环，用户看到的就是一个勉强能点、但怎么看怎么别扭的页面。
