必须使用http://协议而非file://，否则devtools设备模拟器无法正确触发media query、srcset、fetch等特性；file://下浏览器禁用跨文件资源加载且忽略viewport逻辑，导致响应式失效。
直接用浏览器开发者工具的设备模拟模式就能预览，但必须走 http:// 协议（不能是 file://），否则图片、脚本、媒体查询都可能失效。
为什么 DevTools 设备模拟器打不开本地 HTML 文件
Chrome、Edge 的 Device Toolbar 只在 http 或 https 上下文里正常工作。用文件管理器双击打开的 index.html 是 file:// 协议，此时：
-
srcset和sizes会被忽略，浏览器加载最大图源 -
localStorage、fetch、import全部报跨域错误 - 部分 CSS 媒体查询（尤其是带
resolution或hover的）不触发
VS Code 里怎么真正在线预览移动端效果
装 Live Server 插件，右键 HTML 文件选 Open with Live Server，它会启动 http://127.0.0.1:5500/xxx.html —— 这才是能用 DevTools 模拟的合法环境。
- 按
F12→ 点左上角手机图标（Toggle device toolbar）→ 选iPhone 14或自定义尺寸 - 快捷键
Ctrl+Shift+M（Win/Linux）或Cmd+Shift+M（macOS）可快速开关 - 注意：模拟器不等于真实 Safari/Android Browser 渲染，比如
aspect-ratio在 iOS 15.4 以下无效，gap在 Flex 容器中旧版 Safari 不支持
在线平台（CodePen/JSFiddle）里移动端预览要注意什么
这些平台默认渲染在 iframe 里，容易掩盖 viewport 设置失效的问题。
- 务必在
中写全：<meta name="viewport" content="width=device-width, initial-scale=1">，否则sizes中的vw单位算不准 - 别用相对路径：
src="images/photo.jpg"在沙箱里 404，改用绝对 URL 或 base64 内联 - 在线环境不执行服务端逻辑，所有响应式必须靠
srcset+sizes+object-position声明式完成，没法靠 UA 切图
真正容易被忽略的是：模拟器只改视口尺寸和 UA 字符串，它不会模拟 iOS Safari 的 WebKit 渲染差异、也不会触发 Android WebView 的 JS 执行延迟。要验证关键交互，还是得用真机局域网访问 + python -m http.server 8000 配合手机浏览器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
