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）不是“点开就适配”，它跑的是完整系统，对前端代码有更严苛的运行环境要求。
