移动端适配以CSS为主、JS为辅，JS主要用于动态设置viewport、监听媒体查询与视口变化、计算rem/vw基准值、检测设备能力并按需加载内容。
移动端适配和响应式布局在 JavaScript 中不是“单独靠 JS 实现”的，而是以 CSS 为主、JS 为辅的协同方案。JS 的作用主要是检测环境、动态干预样式或行为（比如修改 viewport、监听窗口变化、加载适配资源），而不是替代媒体查询或 Flex/Grid 布局。
移动端基础适配：viewport 控制是前提
没有正确的 viewport 设置，CSS 媒体查询和弹性布局都可能失效。虽然它写在 HTML 的 <meta> 标签里，但 JS 可以动态设置：
- 在页面加载初期，用 JS 检测设备像素比（
window.devicePixelRatio）或屏幕宽度，决定是否注入或修改 viewport meta 标签 - 例如：对某些安卓 WebView 或微信内置浏览器，可强制设置
initial-scale=1.0, maximum-scale=1.0, user-scalable=no防止缩放异常 - 注意：现代项目通常静态写死 viewport，JS 动态操作仅用于特殊兼容场景，避免过度干预
响应式行为控制：用 JS 监听与响应视口变化
CSS 负责布局结构，JS 负责“行为响应”——比如菜单展开、图片懒加载、组件尺寸重算：
- 用
window.matchMedia()监听媒体查询状态，比单纯监听resize更精准、性能更好 - 示例：
const mql = window.matchMedia('(max-width: 768px)'); mql.addEventListener('change', handler); - 对需要精确尺寸的组件（如轮播图、图表容器），用
ResizeObserver替代频繁的resize事件，避免重排抖动
字体与单位适配：JS 辅助 rem/vw 动态计算
当采用 rem 基于根字体大小适配，或使用 vw/vh 做流体排版时，JS 常用于初始化或修正基准值：
立即学习“Java免费学习笔记（深入）”；
- 根据设备宽度动态设置
document.documentElement.style.fontSize（如 375px → 100px，实现 1rem = 100px） - 对 iPad 等横屏平板，需判断
screen.orientation或宽高比，避免竖屏设的 rem 在横屏下过大 - 注意：CSS 的
clamp()和vw单位已能覆盖多数场景，JS 计算仅用于复杂逻辑或旧版兼容
设备能力与内容适配：按需加载与降级
响应式不仅是尺寸，更是能力适配。JS 可检测特性并差异化处理：
- 用
'ontouchstart' in window或navigator.maxTouchPoints > 0判断是否为触屏设备，切换 hover/focus 交互逻辑 - 检查
matchMedia('(prefers-reduced-motion)').matches，关闭动画或简化过渡效果 - 根据
screen.availWidth或window.innerWidth决定是否加载高清图、视频或简化版组件
