设置响应式视口的正确方法

移动端网页若未正确设置HTML的viewport标签，将面临缩放错乱、文字过小、点击失灵等致命问题，几乎等同于功能瘫痪；关键在于必须在内最前端位置写入width=device-width, initial-scale=1，确保浏览器首次渲染即获得准确视口指令，同时警惕CSS强制宽度、第三方脚本动态覆盖、Shadow DOM作用域限制及构建工具误删等隐蔽陷阱，针对iOS刘海屏还需配合viewport-fit=cover与env()变量实现安全区域适配——别只顾代码写了，务必真机验证最终输出的HTML源码中该标签是否真实存在。

不加 ，移动端页面基本等于废了一半——缩放错乱、文字小到看不见、点击区域失灵，全是因为浏览器没拿到正确的视口指令。

viewport 标签写在哪？必须放在 里且越靠前越好

它得在任何 CSS 或 JS 执行前就生效，否则 iOS Safari 可能已经按默认宽度（通常是 980px）渲染完了，再改也来不及。常见错误是把它塞在 里，或者被其他 meta 标签挡在后面。

• 正确位置： 开头，