页面缩成一团、文字小、按钮点不中，八成是viewport标签缺失或只写width=device-width而漏initial-scale=1.0；必须硬编码在最前，正确写法为。
viewport 标签漏了或写错，页面直接缩成一团
手机上文字小得看不清、按钮点不中、布局挤在左上角——八成是 <meta name="viewport"> 没写，或者只写了 width=device-width 却漏了 initial-scale=1.0。iOS Safari 会先按 980px 渲染再缩放，导致 touch 坐标偏移、媒体查询失效、字体模糊。
必须硬编码在 最前面，不能 JS 动态插入，也不能 SSR 后补：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
user-scalable=no和maximum-scale=1.0要慎用：影响可访问性，iOS 13+ 会降权提示，横屏时可能卡死 - 别写
width=375或width=414：设备逻辑宽度随 DPR、系统缩放、横竖屏动态变化，固定值一转屏就崩 - 安卓部分定制 ROM 会忽略
user-scalable=no，双指放大后1px边框和font-size全失真，调试前先手动还原缩放
Chrome DevTools 设备模拟只是“看起来像”，不是真机
按 Ctrl+Shift+M 切进设备模式，选好 iPhone 15 Pro，样式调得再准，也可能跟真机差一大截。它模拟 UA 和 DPR，但不模拟 WebKit 渲染内核差异、iOS 键盘弹出时 position: fixed 的行为、或老 Safari 对 flex: 1 + min-height: 100vh 的解析缺陷。
真正有用的模拟设置：
- 打开
Network Throttling→ 选Slow 3G：能提前暴露srcset没生效、JS 阻塞渲染、图片没 lazyload 的问题 - 关掉
Emulate touch events：远程调试时元素高亮错位，大概率是这个开关开着，实际走的是鼠标事件路径 - 别信 “Toggle device toolbar” 能替代真机验证——比如 iOS 上软键盘顶起页面后，
vh单位全乱套，模拟器根本测不出来
本地改完代码，怎么秒同步到手机上看效果
不用部署、不走 Git，核心就一条：让手机通过 HTTP 协议访问你电脑上的文件。双击打开的 file:// 页面，chrome://inspect 看不见，Safari 远程调试也连不上。
三步跑通局域网实时预览：
- 终端执行：
python3 -m http.server 8000（Mac/Linux）或py -3 -m http.server 8000（Windows） - 查电脑局域网 IP：
ifconfig | grep "inet " | grep -v 127.0.0.1（Mac/Linux），或ipconfig（Windows），找192.168.x.x那行 - 手机浏览器输入：
http://192.168.x.x:8000/index.html（把 x.x 替换成你的真实 IP）
常见卡点：
- macOS 防火墙要关（
系统设置 > 网络 > 防火墙）；Windows 要在Windows Defender 防火墙 > 允许应用通过防火墙里放行 Python - Vue/React 项目用
vite preview或npm run serve，记得加--host 0.0.0.0，否则只绑localhost，手机访问不到 - 改完 HTML/CSS 刷新手机页面即可，无需重启服务
真机调试 console.log 不出来？不是代码没执行，是没连上桥
加了 console.log('test')，手机上啥也不输出，第一反应不该是删日志，而是检查调试通道是否打通。
Android Chrome 远程调试关键步骤：
- 手机开「开发者选项」→ 开「USB 调试」→ 连 USB 到电脑 → 电脑终端运行
adb devices，看到device状态才算识别成功 - Chrome 地址栏输
chrome://inspect→ 点Configure…→ 添加localhost:8000（或你服务端口）→ 页面列表才会出现你的标签页 - 华为/小米用户注意：可能需额外开启「USB 调试(安全设置)」或关闭「MIUI 优化」，否则
adb可识别但 Chrome 不显示网页
iOS Safari 调试路径不同：
- iPhone：设置 → Safari → 高级 → 开「Web 检查器」
- Mac Safari：开发 → [你的设备名] → [页面标题]
- 别指望
file://页面出现在菜单里——必须走 HTTP 服务
最常被忽略的一点：console.log 输出位置不在手机屏幕，而在桌面端 DevTools 的 Console 面板里。真机上看不到 log，不是没执行，是你没切到那个面板。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
