JavaScript通过动态设置viewport、计算rem单位、控制媒体查询、检测设备类型、优化图片加载及处理触摸事件，实现移动端适配；结合性能优化手段如懒加载、文件压缩和CDN加速，提升移动端页面的兼容性与加载效率。
JavaScript在移动端适配中扮演着重要的角色，它能帮助我们动态调整页面元素、处理不同设备的交互，并提供更流畅的用户体验。简单来说，就是让你的网站在各种手机和平板上都能好看好用。
解决方案
移动端适配的核心在于让网页能够根据设备的屏幕尺寸和特性进行自适应调整。JavaScript在这里可以发挥很大的作用，主要体现在以下几个方面：
-
viewport设置： 这是最基础的一步。通过JavaScript动态修改
标签的content属性，可以根据设备宽度设置initial-scale、width等参数。立即学习“Java免费学习笔记（深入）”；
function setViewport() { const viewportMeta = document.querySelector('meta[name="viewport"]'); if (viewportMeta) { viewportMeta.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'; } else { const meta = document.createElement('meta'); meta.name = 'viewport'; meta.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'; document.head.appendChild(meta); } } setViewport(); // 在页面加载时执行这段代码确保了页面在各种设备上以最佳比例显示，并且禁止用户缩放，避免页面错乱。
-
动态rem计算： 使用rem单位配合JavaScript动态计算根元素的font-size，可以实现等比缩放。
function setRemUnit() { const docEl = document.documentElement; const clientWidth = docEl.clientWidth; if (!clientWidth) return; let rem = clientWidth / 10; // 将屏幕宽度分成10份 docEl.style.fontSize = rem + 'px'; } setRemUnit(); // 初始化 window.addEventListener('resize', setRemUnit); // 监听窗口大小变化这个方法会将屏幕宽度分成10份，每一份作为1rem的大小。这样，页面上的元素就可以使用rem单位来设置大小，从而实现等比缩放。例如，一个元素的宽度设置为
5rem
，那么在屏幕宽度为375px的设备上，它的实际宽度就是187.5px。 -
媒体查询（Media Queries）的JavaScript控制： 虽然CSS媒体查询很强大，但有时我们需要更灵活的控制。JavaScript可以检测当前屏幕尺寸，并根据不同的尺寸应用不同的CSS类或执行不同的逻辑。
function handleMediaQuery() { const width = window.innerWidth; if (width < 768) { // 小屏幕 document.body.classList.add('mobile'); document.body.classList.remove('desktop'); } else { // 大屏幕 document.body.classList.add('desktop'); document.body.classList.remove('mobile'); } } handleMediaQuery(); window.addEventListener('resize', handleMediaQuery);这段代码会根据屏幕宽度给
body
元素添加或移除mobile
和desktop
类，然后CSS就可以根据这些类来应用不同的样式。 -
设备检测： 有时我们需要根据不同的设备类型（例如，iOS或Android）来执行不同的逻辑。JavaScript可以检测用户代理字符串（User Agent）来判断设备类型。
function detectDevice() { const ua = navigator.userAgent.toLowerCase(); if (ua.indexOf('iphone') > -1 || ua.indexOf('ipad') > -1) { // iOS document.body.classList.add('ios'); } else if (ua.indexOf('android') > -1) { // Android document.body.classList.add('android'); } } detectDevice();这个方法会检测用户代理字符串，如果包含
iphone
或ipad
，就给body
元素添加ios
类；如果包含android
，就添加android
类。 -
图片优化： 在移动端，加载大尺寸图片会影响页面加载速度。可以使用JavaScript根据屏幕尺寸动态加载不同尺寸的图片。
function optimizeImages() { const images = document.querySelectorAll('img[data-src-small][data-src-large]'); images.forEach(img => { const width = window.innerWidth; if (width < 768) { img.src = img.dataset.srcSmall; } else { img.src = img.dataset.srcLarge; } }); } optimizeImages(); window.addEventListener('resize', optimizeImages);这段代码会遍历所有带有
data-src-small
和data-src-large
属性的img
元素，然后根据屏幕宽度加载不同尺寸的图片。 -
触摸事件处理： 移动设备使用触摸事件而不是鼠标事件。JavaScript可以监听触摸事件，并根据触摸事件的类型（例如，touchstart、touchmove、touchend）来执行不同的逻辑。
const element = document.getElementById('myElement'); element.addEventListener('touchstart', function(event) { // 处理触摸开始事件 console.log('Touch started'); }); element.addEventListener('touchmove', function(event) { // 处理触摸移动事件 console.log('Touch moving'); }); element.addEventListener('touchend', function(event) { // 处理触摸结束事件 console.log('Touch ended'); });这段代码监听了
touchstart
、touchmove
和touchend
事件，并在控制台输出相应的消息。
如何选择合适的移动端适配方案？
选择适配方案需要考虑项目的复杂度和目标用户。如果项目比较简单，只需要简单的响应式布局即可；如果项目比较复杂，需要更灵活的控制，可以考虑使用rem单位配合JavaScript动态计算根元素的font-size。
移动端适配有哪些常见的坑？
-
1px边框问题： 在高清屏幕上，1px的边框会显得很粗。可以使用
transform: scale(0.5)
来解决这个问题。 -
点击穿透问题： 在快速点击页面上的元素时，可能会触发下面的元素的点击事件。可以使用
preventDefault()
来阻止默认行为。 - 输入框弹出键盘遮挡问题： 当输入框获取焦点时，键盘可能会遮挡输入框。可以使用JavaScript滚动页面，使输入框可见。
如何使用JavaScript优化移动端性能？
