移动端HTML布局核心是语义化结构+viewport控制+断点驱动CSS，必须用flex/grid配合媒体查询，并强制设置，否则iOS Safari会默认980px渲染致响应式失效。
移动端 HTML 布局不是“把桌面版缩一缩就行”，核心在于：用语义化结构 + 视口控制 + 断点驱动的 CSS，避开固定像素、浮动和绝对定位陷阱。真正在项目里跑得通的布局，90% 都基于 flex 或 grid + 媒体查询，且必须带 <meta name="viewport">，否则 iOS Safari 会强制缩放，所有响应式都白搭。
viewport 标签写错，整个响应式就失效
这是最常被忽略但后果最直接的一环。没它，手机浏览器默认以 980px 宽度渲染页面，再细的媒体查询也救不回来。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">是底线，必须放在里，且不能重复或漏写 - 别加
user-scalable=no——它会让视障用户无法放大，也违反 WCAG 可访问性要求 - 如果用了
maximum-scale=1.0，iOS Safari 在横屏切换时可能卡死在缩放态，导致内容截断
移动端优先的 flex 布局怎么组织 DOM 结构
别用 float 或 inline-block 做导航栏或卡片流，它们在小屏上容易换行错位、间隙不可控。用 flex 的前提是结构干净、嵌套浅。
- 导航栏用
<nav></nav>包裹<ul></ul>，子项用<li>+<a></a>，避免 div 套 div - 内容区用
<main></main>，侧边栏（如有）放<aside></aside>，语义清晰，屏幕阅读器能识别 - 按钮、链接等可点击区域，CSS 中至少设
min-height: 44px和padding: 12px 16px，满足触屏最小点击尺寸
媒体查询断点怎么选才不翻车
别抄网上“通用断点表”。真实项目中，断点应由内容撑开，而不是设备尺寸决定。Bootstrap 的 768px、992px 是参考值，但你的文字在 680px 就折行了，那断点就得提前。
立即学习“前端免费学习笔记（深入）”；
- 推荐从
max-width: 600px开始写移动样式，再往上逐步增强（mobile-first） - 避免嵌套多层
@media，同一选择器的不同断点样式尽量写在一起，比如：.header { display: flex; } @media (max-width: 600px) { .header { flex-direction: column; } } - 慎用
orientation: landscape——安卓部分机型横屏时不会触发，iOS Safari 对该媒体特性支持不稳定
为什么 Bootstrap 5 的 navbar 在真机上点不动
不是 JS 没加载，也不是 class 写错了，大概率是点击穿透或事件绑定时机问题。尤其在 iOS 上，click 有 300ms 延迟，而 touchstart 又容易误触发。
- 确保
bootstrap.min.js在jQuery之后加载，且版本匹配（Bootstrap 5 不依赖 jQuery，但你模板里若混用了旧版 JS 逻辑，就会冲突） - 检查是否在父容器上写了
pointer-events: none，或者子菜单被z-index压在底层 - 更稳妥的做法是绕过
data-bs-toggle="collapse"，改用手动绑定touchend事件，例如：el.addEventListener('touchend', e => { e.preventDefault(); toggleMenu(); });
真正难的不是写出一个“看起来像移动端”的页面，而是让每个 <a></a> 在 iPhone SE 屏幕上能稳稳点中、让长段落文字在 320px 宽度下不溢出、让折叠菜单收起时不把页面顶出视口——这些细节藏在 min-height、line-height、overflow-anchor 和一次真实的真机连点测试里。
