12个移动端常见问题解决方案

JavaScript , , , ,

移动端总会遇到一系列特定于移动设备的问题，分享下常见的移动端常见问题的处理方案。

1. 1px边框问题

在高清屏幕下，1px的边框显示得比较粗。

.border-1px {  
  position: relative;  
}  
.border-1px::after {  
  position: absolute;  
  content: '';  
  width: 200%;  
  height: 200%;  
  border: 1px solid #999;  
  transform: scale(0.5);  
  transform-origin: left top;  
}

2. 点击延迟300ms问题

移动端浏览器为了检测用户是否双击会有300ms延迟。

// 方案1：使用fastclick库  
document.addEventListener('DOMContentLoaded', function() {  
    FastClick.attach(document.body);  
});  
  
// 方案2：使用CSS方案  
html {  
    touch-action: manipulation;  
}

3. 软键盘弹出问题

软键盘弹出时可能遮挡输入框。

const input = document.querySelector('input');  
input.addEventListener('focus', () => {  
    setTimeout(() => {  
        window.scrollTo(0, document.body.scrollHeight);  
    }, 300);  
});

4. 滚动穿透问题

弹窗出现时，背景仍可滚动。

// 弹窗出现时  
document.body.style.position = 'fixed';  
document.body.style.width = '100%';  
document.body.style.top = -window.scrollY + 'px';  
  
// 弹窗关闭时  
const scrollY = document.body.style.top;  
document.body.style.position = '';  
document.body.style.width = '';  
document.body.style.top = '';  
window.scrollTo(0, parseInt(scrollY || '0') * -1);

5. 页面适配问题

不同设备屏幕尺寸不一致导致的适配问题。

/* 方案1：使用rem适配 */  
html {  
    font-size: calc(100vw / 375 * 16);  
}  
  
/* 方案2：使用vw适配 */  
.container {  
    width: 100vw;  
    height: 100vh;  
}

6. iOS橡皮筋滚动效果

iOS滚动到顶部或底部时的回弹效果影响体验。

body {  
    overflow: hidden;  
    position: fixed;  
    width: 100%;  
}  
  
.scroll-container {  
    height: 100vh;  
    overflow-y: auto;  
    -webkit-overflow-scrolling: touch;  
}

7. 安全区域适配问题

刘海屏、底部虚拟按键区域遮挡内容。

/* iOS安全区域适配 */  
.container {  
    padding-bottom: constant(safe-area-inset-bottom);  
    padding-bottom: env(safe-area-inset-bottom);  
    padding-top: constant(safe-area-inset-top);  
    padding-top: env(safe-area-inset-top);  
}

8. 微信长按图片保存问题

微信浏览器中长按图片会出现保存选项。

img {  
    -webkit-touch-callout: none;  
    pointer-events: none;  
    user-select: none;  
}

9. 滚动条样式问题

默认滚动条样式不美观。

.scroll-container::-webkit-scrollbar {  
    display: none;  
}  
  
/* 或自定义滚动条样式 */  
.scroll-container::-webkit-scrollbar {  
    width: 4px;  
}  
.scroll-container::-webkit-scrollbar-thumb {  
    background: rgba(0, 0, 0, 0.2);  
    border-radius: 2px;  
}

10. 图片资源加载优化

大图片加载影响页面性能。

// 使用懒加载  
const lazyImages = document.querySelectorAll('img[data-src]');  
const lazyLoad = new IntersectionObserver((entries) => {  
    entries.forEach(entry => {  
        if (entry.isIntersecting) {  
            const img = entry.target;  
            img.src = img.dataset.src;  
            lazyLoad.unobserve(img);  
        }  
    });  
});  
  
lazyImages.forEach(img => lazyLoad.observe(img));

11. 表单输入优化

移动端输入体验不佳。

<!-- 数字键盘 -->  
<input type="tel" pattern="[0-9]*">  
  
<!-- 禁用自动完成 -->  
<input autocomplete="off">  
  
<!-- 禁用自动大写 -->  
<input autocapitalize="off">

12. 字体大小自适应

系统字体大小改变影响布局。

/* 禁止字体大小随系统设置改变 */  
html {  
    -webkit-text-size-adjust: 100%;  
    text-size-adjust: 100%;  
}  
  
/* 使用媒体查询适配不同屏幕 */  
@media screen and (max-width: 320px) {  
    html { font-size: 14px; }  
}  
@media screen and (min-width: 375px) {  
    html { font-size: 16px; }  
}  
@media screen and (min-width: 414px) {  
    html { font-size: 18px; }  
}

欢迎大家补充。