chrome devtools 中开启设备模拟器需按f12或右键检查后点击toggle device toolbar图标（或ctrl+shift+m/cmd+shift+m），再通过三点菜单→rendering启用dpr模拟；横竖屏切换不触发orientationchange事件，应手动dispatch resize事件；本地文件须通过http服务（如npx serve）在真机访问；真机与模拟器在viewport解析、字体渲染及vh行为上存在关键差异，必须真机验证。
Chrome DevTools 里怎么开设备模拟器
直接按 F12 或右键「检查」打开开发者工具，点左上角的 Toggle device toolbar 图标（看起来像手机和平板叠在一起），或者按快捷键 Ctrl+Shift+M（Windows/Linux）或 Cmd+Shift+M（macOS）。这时候页面会缩放，顶部出现设备尺寸栏和预设机型下拉菜单。
常见误区是只调宽度不看 DPR（设备像素比）：比如选「iPhone 12」后，window.devicePixelRatio 应该是 3，但默认模拟器可能没启用高 DPR 渲染。解决方法是在设备工具栏右侧点三点菜单 → Rendering → 勾选 Device emulation 下的 Emulate CSS media features，并确认 device-pixel-ratio 设置为对应值。
- 预设机型只是宽高 + DPR 快捷组合，实际响应式行为仍取决于你写的
@media查询和 CSS - 刷新页面后模拟状态通常保留，但硬刷新（
Ctrl+F5）会重置 DPR 模拟，需手动再开 - 某些 CSS 属性（如
aspect-ratio、container queries）在旧版 Chrome 中不触发模拟，建议用 Chrome 110+
怎么测横竖屏切换和 resize 行为
设备工具栏里点旋转图标（或按 Ctrl+Shift+R）能切横竖屏，但这个只是改视口尺寸，不会触发 orientationchange 事件——因为浏览器没真当它是手机。真正要验证事件监听是否生效，得用真实设备或通过 chrome://flags/#enable-web-platform-tests 启用实验性 orientation 模拟（不推荐日常用）。
更可靠的做法是手动触发 resize：在 Console 里执行 window.dispatchEvent(new Event('resize'))，或写个简单脚本反复改 document.documentElement.style.width 并 dispatch。
-
matchMedia('(orientation: landscape)')的监听回调，在模拟器里基本不可靠，别依赖它做关键逻辑 - 用
window.innerWidth/window.innerHeight判断布局比查screen.orientation更稳 - 如果用了 ResizeObserver，注意它在模拟器中响应延迟比真实设备高，别拿它测动画帧率
本地 HTML 文件怎么在手机上实时预览
不能直接用 file:// 协议打开，iOS Safari 和新版 Android Chrome 都会禁掉大部分 API（比如 fetch、localStorage 在非 HTTP 环境受限）。必须起一个本地 HTTP 服务。
最轻量的是用 Node.js 的 serve：npx serve -s .（当前目录），然后在手机浏览器访问电脑局域网 IP（比如 http://192.168.1.100:3000）。没有 Node？Python 3 用户可用 python3 -m http.server 8000，但记得关防火墙或加端口例外。
- 手机和电脑必须在同一 Wi-Fi 下，手机浏览器地址栏输的是电脑的局域网 IP，不是
localhost - Mac 用户若启用了「防火墙」，要在「系统设置 → 网络 → 防火墙选项」里允许传入连接（端口 3000/8000）
- 用 VS Code 的 Live Server 插件时，默认只绑
127.0.0.1，需在插件设置里改liveServer.settings.host为0.0.0.0
为什么在模拟器里看着正常，真机上却错位
核心原因是 iOS Safari 和部分安卓 WebView 对 viewport 解析更严格，尤其当 meta name="viewport" 缺失或写错时。比如漏了 initial-scale=1，iPhone 会强制按 980px 渲染；又或者写了 user-scalable=no 但没配 maximum-scale=1，导致双击缩放异常。
另一个高频问题是字体渲染差异：Chrome 模拟器用的是系统字体子集，而 iOS 默认用 San Francisco，行高、字间距、甚至换行点都可能不同。用 font-size: clamp(1rem, 2.5vw, 1.5rem) 这类响应式字号时，iOS 的 vw 计算会把地址栏高度也算进去，导致视觉跳变。
- 务必在真机上至少跑一次
console.log(getComputedStyle(document.body).fontSize)，对比模拟器输出 - 避免用
vh做全屏高度，Safari 的100vh在地址栏收起/展开时会重算，造成布局抖动 - 检测是否在微信内置浏览器？用
navigator.userAgent.includes('MicroMessenger')，它的 viewport 行为和标准 Safari 不完全一致
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
