12 個移動端常見問題解決方案

作者：JavaScript 2025-02-19 08:00:00

移動端總會遇到一系列特定于移動設備的問題，分享下常見的移動端常見問題的處理方案。

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; }
}

歡迎大家補充。

責任編輯：趙寧寧來源： JavaScript

移動端移動設備移動開發