VS Code 写 HTML5 需借助 Live Server 插件启动本地服务，在浏览器中打开后用 DevTools Device Toolbar 模拟多端尺寸，但仅为视口模拟；真机调试需通过 Chrome（Android）或 Safari（iOS）远程调试，且须用局域网 IP 访问。
VS Code 写 HTML5 怎么实时看多端效果
VS Code 本身不内置多端预览能力，得靠插件 + 浏览器开发者工具配合。核心思路是：本地起服务 → 在 Chrome/Firefox 中打开 → 用 DevTools 的 Device Toolbar 切换设备尺寸和 UA。
实操建议：
- 装
Live Server插件（微软官方推荐），右键 HTML 文件选Open with Live Server，自动在默认浏览器打开http://127.0.0.1:5500/xxx.html - 按
F12打开开发者工具 → 点左上角Toggle device toolbar（或快捷键Ctrl+Shift+M）→ 下拉选iPhone 14、Pixel 5、Responsive等预设尺寸 - 注意：这只是视口模拟，不模拟真实系统渲染引擎（比如 iOS Safari 的 Flexbox 行为差异不会体现）
- 真机调试要连手机：Chrome 连 Android（需开启 USB 调试）、Safari 连 iPhone（需 macOS + 开启 Web Inspector）
为什么不能只靠 VS Code 自带的 Preview 插件看适配
Preview on Web Server 或 HTML Preview 类插件直接用 file:// 协议打开文件，会触发浏览器的跨域限制 —— 所有 fetch、XMLHttpRequest、import、localStorage（部分场景）都会失败，且无法读取本地 CSS/JS 文件（尤其带相对路径时）。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 控制台报错
Access to script at 'file:///xxx.js' from origin 'null' has been blocked - 页面空白，但 HTML 结构正常，CSS/JS 完全没加载
- 媒体查询生效了，但 JS 初始化逻辑崩了，误以为是响应式问题，其实是协议限制
切模拟器前必须确认的三件事
模拟器（Android Studio Emulator / Xcode Simulator）不是“点开就适配”，它跑的是完整系统，对前端代码有更严苛的运行环境要求。
务必检查：
- 你的 HTML 页面是否通过
http(s)访问？模拟器里打不开file://路径，必须部署到本地服务器（如Live Server、python3 -m http.server 8000），再用模拟器浏览器访问http://10.0.2.2:5500（Android 模拟器特殊 IP）或http://localhost:5500（iOS 模拟器需关掉 Safari 的「阻止所有 Cookie」） - CSS 是否用了 Safari 不支持的语法？比如
aspect-ratio在 iOS 15.4 以下无效，gap在 Flex 容器中旧版 Safari 不认 - 有没有硬编码
window.innerWidth或screen.width？模拟器的screen尺寸和视口尺寸可能不一致，应优先用matchMedia或 CSS 媒体查询
真机调试比模拟器更值得优先做
Android 模拟器启动慢、卡顿、GPU 渲染不一致；Xcode 模拟器不支持某些 WebKit 特性（比如 dialog 元素的原生样式）。而真机调试能暴露最真实的兼容问题。
快速通路：
- Android：Chrome 地址栏输
chrome://inspect→ 确保 USB 连接 + 开启「USB 调试」→ 设备列表里点你的页面 → 直接调试 DOM/CSS/Console - iOS：Mac 上 Safari → 偏好设置 → 高级 → 勾选「在菜单栏中显示开发菜单」→ iPhone 设置 → Safari → 高级 → 开启「Web Inspector」→ 数据线连接后，Safari 开发菜单里选你的设备和页面
- 关键提醒：真机访问本地服务时，别用
127.0.0.1或localhost，要换成你电脑在同一局域网下的 IP（如192.168.1.100:5500），否则连不上
多端预览的本质不是“看起来像”，而是“行为一致”。设备工具栏调尺寸只是第一步，网络、存储、触摸事件、字体渲染、甚至时区和语言设置，都可能影响最终表现。别跳过真机验证这步——很多“适配好了”的页面，一上 iPhone 就白屏，原因往往是一行 const foo = new AbortController()。
