移动端适配需结合视口控制、DPR识别与rem动态布局，通过JavaScript监听屏幕变化并协同CSS媒体查询，实现跨设备响应；利用touch事件优化交互体验。
移动端适配和响应式开发是JavaScript在现代Web开发中非常关键的一环。随着设备种类越来越多，屏幕尺寸千差万别，如何让网页在手机、平板、桌面等不同设备上都能良好展示，成为前端开发者必须面对的问题。JavaScript虽然不能单独完成布局适配，但结合CSS和HTML，能动态响应设备变化，提升用户体验。
理解视口与DPR：基础中的基础
移动设备的显示机制与PC不同，核心在于视口（viewport）和设备像素比（DPR）。
通过设置meta viewport标签，可以控制页面在移动设备上的初始缩放和布局宽度：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">这段代码让页面宽度等于设备屏幕宽度，禁止用户缩放。JavaScript可以通过window.innerWidth和screen.width获取视口尺寸，判断当前设备类型或横竖屏状态。
立即学习“Java免费学习笔记（深入）”；
DPR决定了物理像素与CSS像素的比例。例如 DPR=2 表示一个CSS像素对应4个物理像素。JavaScript可通过window.devicePixelRatio读取该值，用于加载高清图片或调整Canvas绘图精度。
动态rem适配方案
rem是相对于根元素（html）字体大小的单位，适合做弹性布局。常用做法是根据设备宽度动态设置html的font-size。
例如设计稿为750px宽，希望每100px对应1rem：
- 设备宽度为375px时，html fontSize = 375 / 7.5 = 50px
- 此时 1rem = 50px，750px设计稿上的元素尺寸除以100即为rem值
JavaScript实现方式：
function setRem() {const baseWidth = 750;
const scale = document.documentElement.clientWidth / baseWidth;
document.documentElement.style.fontSize = (scale * 100) + 'px';
}
window.addEventListener('resize', setRem);
setRem();
此后所有尺寸用rem单位，页面即可等比缩放。注意在页面初始化和窗口变化时重新计算。
媒体查询与JavaScript协同响应
CSS媒体查询能处理大多数断点样式切换，但某些交互行为需要JavaScript介入。
例如在小屏幕上隐藏侧边栏，在大屏幕上默认展开：
- 用CSS定义不同屏幕下的显示规则
- 用JavaScript监听
matchMedia，动态加载模块或绑定事件
示例：
const mq = window.matchMedia('(max-width: 768px)');function handleScreenChange(e) {
if (e.matches) {
// 手机端逻辑
initMobileMenu();
} else {
// 桌面端逻辑
destroyMobileMenu();
}
}
mq.addListener(handleScreenChange);
handleScreenChange(mq);
这样既能利用CSS控制样式，又能让JavaScript按需执行逻辑，提升性能。
处理触摸与手势事件
移动端主要交互方式是触摸，JavaScript需使用touch事件替代鼠标事件。
常见操作包括：
- touchstart：手指按下
- touchmove：手指滑动
- touchend：手指抬起
可基于这些事件实现轮播图滑动、下拉刷新等功能。注意防止默认滚动行为影响操作体验：
element.addEventListener('touchmove', function(e) {e.preventDefault(); // 阻止页面滚动
}, { passive: false });
使用passive选项可避免浏览器警告，同时确保preventDefault生效。
基本上就这些。移动端适配不是一劳永逸的事，关键是建立一套灵活的响应机制。结合rem布局、视口控制、媒体查询和JavaScript动态响应，就能覆盖大多数场景。不复杂但容易忽略细节。
