摘要：const input = document.querySelector('input');input.addEventListener('focus', => { setTimeout( => { window.scrollTo(0, document.bo
移动端总会遇到一系列特定于移动设备的问题，分享下常见的移动端常见问题的处理方案。
问题描述：在高清屏幕下，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;}问题描述：移动端浏览器为了检测用户是否双击会有300ms延迟。
解决方案：
// 方案1: 使用fastclick库document.addEventListener('DOMContentLoaded', function { FastClick.attach(document.body);}); // 方案2: 使用CSS方案html { touch-action: manipulation;}问题描述：软键盘弹出时可能遮挡输入框。
解决方案：
const input = document.querySelector('input');input.addEventListener('focus', => { setTimeout( => { window.scrollTo(0, document.body.scrollHeight); }, 300);});问题描述：弹窗出现时，背景仍可滚动。
解决方案：
// 弹窗出现时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);问题描述：不同设备屏幕尺寸不一致导致的适配问题。
解决方案：
/* 方案1：使用rem适配 */html { font-size: calc(100vw / 375 * 16);}/* 方案2：使用vw适配 */.container { width: 100vw; height: 100vh;}问题描述：iOS滚动到顶部或底部时的回弹效果影响体验。
解决方案：
body { overflow: hidden; position: fixed; width: 100%;}.scroll-container { height: 100vh; overflow-y: auto; -webkit-overflow-scrolling: touch;}问题描述：刘海屏、底部虚拟按键区域遮挡内容。
解决方案：
/* 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);}问题描述：微信浏览器中长按图片会出现保存选项。
解决方案：
img { -webkit-touch-callout: none; pointer-events: none; user-select: none;}问题描述：默认滚动条样式不美观。
解决方案：
.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;}问题描述：大图片加载影响页面性能。
解决方案：
// 使用懒加载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));问题描述：移动端输入体验不佳。
问题描述：系统字体大小改变影响布局。
解决方案：
/* 禁止字体大小随系统设置改变 */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; }}来源：不秃头程序员
