用 vs code 写手机网页核心是写代码、加 viewport 元标签、用浏览器 devtools 预览；必须添加 ，否则移动端渲染异常；真机测试前需关闭 devtools 的网络与 cpu 节流。
用 VS Code 写手机网页，核心就三件事：写 HTML/CSS/JS、加 viewport、预览看效果
VS Code 本身不是浏览器，也不自带移动端模拟器，但它能高效写代码，配合浏览器 DevTools 就是完整手机网页开发流。别指望点个按钮就“生成 H5”，得自己控制响应逻辑。
必须加 <meta name="viewport">，否则页面在手机上会缩成一团
这是最常漏掉、也最致命的一行。没有它，iOS 和 Android 浏览器默认按桌面宽度（通常 980px）渲染，文字小到看不见，点击区域错位。
正确写法只有一行，放在 里：
良精Wap企业网站管理系统 1.2
下载
什么是企业WAP网站，企业3G网站 企业WAP网站一般是指展示企业形象，介绍企业产品的WAP手机网站或者3G手机网站，让客户可以通过手机就能了解一个企业的大体情况和产品内容，从而更广泛的宣传企业，赢得更多的客户关注度！一般企业WAP网站包括：公司介绍，产品介绍，企业新闻动态，服务范围介绍，留言板，企业招聘信息等内容，如果有特殊要求，我们也会按照客户的要求定做。 企业为何要建设手机WAP网站，3
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
width=device-width告诉浏览器用设备真实宽度（比如 iPhone 14 是 390px），不是虚拟桌面宽 -
initial-scale=1.0禁止页面加载时自动缩放，避免用户看到“小地图”再双指放大 - 别加
user-scalable=no—— 无障碍和可访问性会被投诉，苹果审核也可能拒
用 Chrome 或 Edge 的 DevTools 模拟真机，别信 VS Code 插件的“预览”
VS Code 里装 Live Server 插件后点“Go Live”，只是起一个本地服务器（http://localhost:5500），真正看效果还得靠浏览器。
- 在 Chrome 打开你的页面 → F12 → 点左上角
Toggle device toolbar（或 Ctrl+Shift+M）→ 选 iPhone 12 / Pixel 5 等预设尺寸 - 注意看右上角是否显示
Responsive或具体型号，没显示说明没进模拟模式 - 某些 CSS（比如
vh单位）在 iOS Safari 里有滚动条影响高度，仅靠模拟器看不出，真机连 USB 调试更准（chrome://inspect） - VS Code 插件如 “Open in Browser” 只是打开默认浏览器，不带设备模拟，基本没用
响应式布局别只靠媒体查询，优先用现代 CSS（flex、grid、rem）
写死 @media (max-width: 768px) 容易漏边缘机型，且维护成本高。手机网页该“流动”起来，而不是切一堆断点。
- 容器用
display: flex或display: grid，天然适配不同宽度，比 float + media query 更稳 - 字体和间距用
rem（根元素 font-size 动态设）或clamp(1rem, 2.5vw, 1.25rem)，比固定px更适应屏幕 - 图片必须加
max-width: 100%; height: auto;，否则在窄屏上直接撑破容器 - 避免
position: fixed顶部导航在 iOS 上滚动卡顿，改用position: sticky更安全
真机测试前，先关掉 Chrome DevTools 的 “Network Throttling” 和 “CPU Throttling”，它们会让动画卡顿，误判性能问题。
