html在线运行无法自动实现自适应，关键在于手动添加viewport meta标签、在head内联style中用calc()设置rem基准，以及用真机访问外链预览。
HTML在线运行时无法自动实现自适应——它只执行你写的代码，不会替你补 viewport、算 rem 或加媒体查询。想看到真实移动端效果，关键不在“运行平台”，而在你是否写了适配逻辑、以及用什么方式预览。
viewport meta 标签必须手写且放对位置
几乎所有在线运行平台（CodePen、JSFiddle、CodeSandbox、甚至浏览器地址栏直接 data:text/html,）都不会自动注入 <meta name="viewport">。漏掉它，页面在手机浏览器里就直接缩成一团、文字看不清、点击错位。
- 必须手动写进
最顶部，早于任何 CSS/JS：<meta name="viewport" content="width=device-width, initial-scale=1.0"> -
width=device-width拼错成device_width或width=deviceWidth都无效 - 不加
initial-scale=1.0：iOS Safari 会先按 980px 渲染再缩放，导致 touch 坐标偏移、字体模糊、@media断点失效 - 别加
user-scalable=no或maximum-scale=1.0：不仅违反 WCAG 可访问性，iOS 13+ 还会降权提示，横屏时可能卡死
rem 基准不能靠 JS 动态设，否则必闪屏
很多在线示例用 document.documentElement.style.fontSize 在 DOMContentLoaded 里设根字号，这在本地开发可能看不出问题，但在线运行 + 移动端真机预览时，用户肉眼可见文字突然放大/缩小——因为浏览器先按默认 16px 渲染一遍，再重绘。
- 可靠做法是把计算逻辑塞进
的内联<style></style>中，用calc()直接算死：html { font-size: calc(100vw / 375 * 16px); }（以 375px 设计稿为基准） - Safari ≤ iOS 12 不支持
calc(100vw / 375 * 1rem)这种混单位写法，必须统一用px - 别用
window.innerWidth动态读取再设置：横竖屏切换、双击放大后，该值可能滞后或不准，尤其在 iOS 上
移动端真机预览比模拟器更可靠
Chrome DevTools 的 device mode 只是样式模拟，不触发真实 viewport 解析流程；iOS Safari 的 “添加到主屏幕” 或 Android Chrome 的 “添加到桌面” 才是检验自适应的黄金标准。
- 在线运行平台生成的 URL（如 CodePen 的
https://codepen.io/xxx/full/xxx）可直接在手机浏览器打开，这是最接近生产环境的测试方式 - 如果平台不支持外链（如某些教育类 IDE），可用
ngrok或localtunnel将本地服务暴露为公网 URL，再用手机访问 - 避免依赖 “响应式设计模式” 切换：它不会重载页面，也不会重新解析
<meta name="viewport">，改了标签必须刷新才生效
真正卡住人的不是技术多难，而是 viewport 写错、rem 基准晚设、预览方式用错这三处——它们都发生在 HTML 解析最早期阶段，一旦出错，后续所有布局都会漂移。检查时优先盯死 里的那行 meta 和那块 inline style。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
