JavaScript移动端适配实战技巧（实用技巧版）

在做内网穿透项目时，经常需要通过手机访问本地调试的Web页面。这时候你会发现，同样的ref="/tag/137/" style="color:#E3A3CF;font-weight:bold;">JavaScript代码，在电脑上跑得好好的，一到手机上就出问题：点击不灵敏、布局错乱、甚至某些API直接报错。

视口设置是第一步

很多人忽略了meta viewport标签，结果导致页面在手机上自动缩放，点击区域偏移。加上这行代码基本能解决大部分显示问题：

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

用事件代理处理触摸行为

PC端常用的click事件在移动端有大约300毫秒的延迟。虽然现在很多浏览器优化了这个问题，但为了兼容老设备，建议使用touchstart代替：

document.getElementById('btn').addEventListener('touchstart', function(e) {
  e.preventDefault();
  console.log('按钮被点击了');
});

如果担心误触，可以结合判断是否为移动环境：

const isMobile = /iPhone|Android/i.test(navigator.userAgent);
const eventType = isMobile ? 'touchstart' : 'click';

el.addEventListener(eventType, handler);

屏幕尺寸变化要实时响应

手机横竖屏切换很常见，JS需要及时感知。监听resize事件的同时，也要注意orientationchange：

window.addEventListener('resize', adjustLayout);
window.addEventListener('orientationchange', function() {
  setTimeout(adjustLayout, 150);
});

function adjustLayout() {
  const width = document.documentElement.clientWidth;
  if (width < 768) {
    // 移动端布局逻辑
  }
}

小心那些不存在的API

某些PC浏览器支持的API在低端安卓机上可能压根没有。比如localStorage在iOS私密浏览模式下会抛错。写入前先检测：

function storageAvailable(type) {
  try {
    const storage = window[type];
    const x = '__storage_test__';
    storage.setItem(x, x);
    storage.removeItem(x);
    return true;
  } catch (e) {
    return false;
  }
}

if (storageAvailable('localStorage')) {
  localStorage.setItem('data', 'value');
}

字体和点击区域要够大

手指不是鼠标箭头，太小的点击区域容易点错。按钮高度至少44px，文字不小于14px。用JS动态调整：

if (isMobile) {
  document.body.style.fontSize = '16px';
}

实际开发中，内网穿透配合手机访问本地服务时，这些细节决定了体验好坏。别等到用户反馈才去修，一开始就按移动端习惯来写JS，省事又稳定。