标准写法是<meta name="viewport" content="width=device-width, initial-scale=1.0">，必须置于<head>最前；width=device-width使视口匹配设备物理宽度，initial-scale=1.0禁用默认缩放，禁用user-scalable/no和max/min-scale以保障无障碍与兼容性。
viewport meta 标签的标准写法是什么
移动端页面不缩放、不拖拽、适配不同屏幕，核心就靠这行 <meta name="viewport" >。它不是可选配置，而是现代响应式页面的强制基础——漏掉或写错，width=device-width 就失效，iOS Safari 会默认按 980px 渲染，页面直接“变小”或横向滚动。
标准写法只有一行，且必须放在 <head> 内（越靠前越好）：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
width=device-width：让视口宽度等于设备物理像素宽度（不是 CSS 像素），这是最关键的参数 -
initial-scale=1.0：页面加载时缩放比例为 1，避免 iOS 自动放大文本导致布局错乱 - 不要加
user-scalable=no—— 屏幕阅读器、视力障碍用户依赖缩放，多数场景下禁用是反无障碍的 - 不要用
maximum-scale=1.0或minimum-scale=1.0—— 它们会锁死缩放，触发 iOS 的“双击缩放失效”问题，且在 Chrome Android 上行为不一致
为什么不能写成 width=375 或 width=768
硬编码数值（比如 width=375）看似能“固定”尺寸，实则破坏响应式逻辑。浏览器会把整个页面当成一个 375px 宽的画布渲染，再缩放进实际屏幕，导致字体模糊、点击区域错位、媒体查询失效。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- iOS 上双指缩放失灵，或缩放后内容被裁切
- 安卓 Chrome 显示“页面过宽”，出现横向滚动条
-
@media (max-width: 768px)在 iPad 上不触发（因为视口宽度被设成了 375，而非真实设备宽度）
需要适配 DPR 高清屏怎么办
width=device-width 已经自动适配了设备像素比（DPR）。不需要手动除以 DPR，也不用写 target-densitydpi=xxx（该属性早已被 Chrome 和 WebView 废弃）。
真正要做的只有两件事：
- 用
rem或vw做响应式单位，而非固定px - 图片用
srcset或picture提供多倍图，例如：<img src="icon@1x.png" srcset="icon@2x.png 2x, icon@3x.png 3x"> - 如果用 Canvas，需显式设置
canvas.width = canvas.clientWidth * window.devicePixelRatio，但这是 JS 层面的事，和 viewport meta 无关
Next.js / Vue / React 项目里怎么加
框架不会自动注入 viewport meta，必须手动声明。位置很关键：不能写在组件里靠后渲染，得确保首屏 HTML 就包含它。
- Next.js：在
app/layout.tsx的<head>中直接写<meta name="viewport" content="width=device-width, initial-scale=1.0" /> - Vue CLI / Vite：写在
public/index.html的<head>里，别放在App.vue的<template>中 - React（无 SSR）：确保
index.html的<head>里有这行；若用react-helmet，需确认 hydration 前已注入，否则首屏闪动
最容易被忽略的是：构建工具（如 Webpack）可能对 HTML 进行压缩或重写，删掉空格或合并 meta 标签——务必检查最终产出的 HTML 源码中，这行是否完整存在且未被覆盖。
