JavaScript移动端适配实战技巧

做移动端网页时，不同手机屏幕尺寸和分辨率让人头疼。尤其是老机型和新款全面屏混用的场景，页面元素错位、字体忽大忽小，用户一翻车就跑了。这时候光靠CSS媒体查询不够用，得靠ref="/tag/137/" style="color:#8B0506;font-weight:bold;">JavaScript动态干预，才能真正“适配”。

视口控制是第一步

很多问题其实出在 viewport 没设对。别以为写了 meta 标签就万事大吉，有些安卓机自带浏览器会缩放页面。可以在 JS 里动态设置：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

然后用 JavaScript 监听设备方向变化，防止横屏时页面失控：

window.addEventListener('orientationchange', function() {
  setTimeout(function() {
    window.scrollTo(0, 0);
  }, 100);
});

动态 rem 计算更灵活

用 rem 做单位配合 JS 动态调整根字体大小，是现在主流做法。比如设计稿是 750px 宽，我们可以把页面等分成 10 份：

function setRootFontSize() {
  const designWidth = 750;
  const width = document.documentElement.clientWidth;
  const fontSize = (width / designWidth) * 100;
  document.documentElement.style.fontSize = fontSize + 'px';
}

setRootFontSize();
window.addEventListener('resize', setRootFontSize);

这样一来，写样式时 font-size: 14px 就变成 font-size: 0.14rem，自动适应各种屏幕。

处理刘海屏和安全区域

iPhone 的刘海、安卓的圆角屏，内容被切掉一块很常见。CSS 有 env(safe-area-inset-) 可用，但低版本不支持，得用 JS 判断并加类名：

if (window.innerHeight > window.screen.height * 0.9) {
  document.body.classList.add('safe-area-available');
}

然后在 CSS 里针对这些类做补丁，比如给底部按钮多留点空隙。

点击延迟与手指事件优化

移动端 click 有 300ms 延迟，用户会觉得“卡”。直接上 touch 事件又容易误触。可以用 fastclick 的思路自己实现一个轻量版：

let touchStartTime = 0;
const button = document.getElementById('myBtn');

button.addEventListener('touchstart', () => {
  touchStartTime = Date.now();
});

button.addEventListener('touchend', (e) => {
  if (Date.now() - touchStartTime < 200) {
    e.preventDefault();
    // 触发自定义点击逻辑
    handleClick();
  }
});

识别设备类型做差异化处理

有时候安卓和 iOS 行为不一致，比如软键盘弹起时页面高度计算偏差。可以通过 UA 简单判断：

const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);
const isAndroid = /Android/.test(navigator.userAgent);

if (isIOS) {
  // iOS 上监听 focus 事件调整滚动位置
  document.querySelectorAll('input, textarea').forEach(el => {
    el.addEventListener('focus', () => {
      setTimeout(() => {
        window.scrollTo(0, document.body.clientHeight);
      }, 300);
    });
  });
}

这些方法在实际项目中反复验证过，比如做一个 H5 报名页，在小米旧机和 iPhone 14 上都能正常输入、按钮不被遮挡。适配不是追求完美一致，而是让功能可用、体验不崩。