viewport标签写错会导致响应式失效，正确写法是<meta name="viewport" content="width=device-width, initial-scale=1.0">并置于<head>最顶部。
viewport 标签写错，所有响应式都白搭
移动端页面缩成一团、文字糊、左右可拖动——90% 的问题出在 <meta name="viewport"> 没写对或没生效。它不是“可选配置”，而是浏览器渲染的第一道指令。
常见错误包括：width=375 这类固定值（折叠屏、iPad 分屏直接崩）、user-scalable=no（违反可访问性，且 iOS Safari 仍允许双指缩放）、<head> 里重复写两次（后一个覆盖前一个，但首屏已按错误配置渲染）。
- 最简有效写法只有一行：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - 必须放在
<head>最顶部，且在任何 CSS<link>或<style>之前 - 不要用 JS 动态插入——iOS Safari 和部分 Android WebView 会忽略
document.head.appendChild()的 late 注入
HTML 结构要为断点留“弹性接口”，不是堆 div
响应式失效常源于结构僵硬：比如用固定 width: 1200px 的外层容器、嵌套多层 float、或把导航栏写死成 <ul><li> 并靠 JS 切换 class。这类结构在小屏上要么溢出，要么需要大量重写 CSS。
真正适配跨终端的 HTML 结构，核心是“容器即断点”：
立即学习“前端免费学习笔记（深入）”；
- 用语义化标签替代无意义
<div>：比如<header>、<main>、<aside>，它们天然支持 flex/grid 布局切换 - 关键容器不设固定宽高，改用
max-width+margin: 0 auto，让内容在窄屏自动收缩、宽屏限制最大宽度 - 导航菜单用
<nav>包裹，内部用display: flex，小屏时通过媒体查询切到flex-direction: column，而非 JS 控制显隐
按需加载 HTML 片段 ≠ 直接 innerHTML，脚本和 XSS 是雷区
想在 PC 端加载完整仪表盘，在手机端只加载关键卡片？很多人直接 fetch('/card.html').then(r => el.innerHTML = r) ——这能显示 DOM，但 <script> 不执行、data-src 图片不加载、事件监听器全丢失，还可能引入 XSS。
安全可行的按需加载路径只有两条：
- 服务端返回纯 HTML 字符串（不含
<html><body>外壳），前端用DOMParser解析后手动提取<script>标签，再用document.createElement('script')注入（⚠️仅限可信源，且需处理src路径相对性） - 更推荐：用
import()动态加载封装好的组件（如 Vue 单文件组件或 React lazy 组件），HTML 模板、逻辑、样式全部隔离，避免手动解析风险 - 绝对避免
eval()执行内联脚本，也别用v-html渲染用户输入内容
rem 基准不能靠 media query 硬编码，得用 JS 动态算
写 @media (max-width: 768px) { html { font-size: 14px; } } 看似简单，但在 iPad Pro（逻辑宽度 1024px）、安卓平板（800px）、折叠屏（展开后 1200px）上全失效——因为断点是按设备型号卡的，不是按内容容器。
真正可控的做法是 JS 动态计算：
function setRem() {
const baseWidth = 375; // 设计稿基准宽度
const scale = document.documentElement.clientWidth / baseWidth;
document.documentElement.style.fontSize = scale * 16 + 'px';
}
setRem();
window.addEventListener('resize', setRem);
window.addEventListener('orientationchange', setRem);注意两个坑：focus 事件需临时调小 font-size 防键盘顶出输入框；某些安卓 WebView 不触发 resize，得配合 matchMedia('(min-width: 0px)') 监听变化。
跨终端适配最易被忽略的，不是怎么写 media query，而是 viewport 是否真正生效、HTML 结构是否预留了 flex/grid 的切换空间、以及动态加载的 HTML 片段里有没有藏着未执行的脚本或未校验的用户输入。
