标准写法是，必须置于最前，width=device-width使页面宽度匹配设备逻辑像素，initial-scale=1.0确保初始缩放为1避免字体过小，二者缺一不可。
viewport meta标签的标准写法
移动端页面不加 viewport，基本等于放弃适配——浏览器会按 980px 左右的默认宽度渲染，文字小得看不清，缩放又失焦。标准写法就这一行，必须放在 里：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
它干两件事：把布局宽度设为设备屏幕宽度（width=device-width），再把初始缩放设为 1（initial-scale=1.0）。这两个参数缺一不可，只写一个容易出问题。
哪些参数不能乱加
常见错误是堆砌一堆“看起来很全”的参数，比如加 user-scalable=no 或 maximum-scale=1.0。这在 iOS 上会直接禁用双指缩放，对视力障碍用户不友好，还可能被 WCAG 合规检查拦下。除非产品明确要求锁定缩放（极少数场景），否则别碰这些限制性参数。
-
minimum-scale和maximum-scale值设成一样（如都为 1.0）等价于禁止缩放 -
user-scalable=no在 iOS Safari 中优先级高于maximum-scale，一旦设了就真锁死了 -
target-densitydpi是 Android 旧版 WebView 的私有属性，现代浏览器已忽略，写了白写
响应式断点和 viewport 的关系
viewport 不决定 CSS 媒体查询怎么写，但它决定了媒体查询的基准——width=device-width 让 @media (max-width: 768px) 真正按设备物理宽度（经像素比换算后）生效。如果漏了这个，媒体查询可能在 iPad 上失效，或在高 DPI 屏上错判尺寸。
注意：不要为了适配某款手机而硬写 width=375 这类固定值。不同设备的 device-width 由系统上报，浏览器自动处理，硬编码反而会让页面在折叠屏、横屏等场景崩掉。
调试时怎么看 viewport 生效没
Chrome DevTools 里打开「Toggle device toolbar」（Ctrl+Shift+M），选中设备后右键检查元素 → 查看 里的 meta[name="viewport"] 是否存在且内容正确。更直接的办法是运行这段 JS：
console.log(document.querySelector('meta[name="viewport"]').getAttribute('content'));
如果报 Cannot read property 'getAttribute' of null，说明标签根本没加；如果返回空字符串或格式错误（比如逗号写成中文顿号），那也白搭。
真机调试时，Safari 的 Web Inspector 也能看到同一条 meta 标签，但要注意某些 iOS 版本对空格敏感——content="width=device-width , initial-scale=1" 中的空格可能导致解析失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
