12 個(gè)移動(dòng)端常見(jiàn)問(wèn)題解決方案
作者：JavaScript
移動(dòng)端總會(huì)遇到一系列特定于移動(dòng)設(shè)備的問(wèn)題，分享下常見(jiàn)的移動(dòng)端常見(jiàn)問(wèn)題的處理方案。
移動(dòng)端總會(huì)遇到一系列特定于移動(dòng)設(shè)備的問(wèn)題，分享下常見(jiàn)的移動(dòng)端常見(jiàn)問(wèn)題的處理方案。
1. 1px邊框問(wèn)題
在高清屏幕下，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. 點(diǎn)擊延遲300ms問(wèn)題
移動(dòng)端瀏覽器為了檢測(cè)用戶(hù)是否雙擊會(huì)有300ms延遲。
// 方案1：使用fastclick庫(kù)
document.addEventListener('DOMContentLoaded', function() {
FastClick.attach(document.body);
});
// 方案2：使用CSS方案
html {
touch-action: manipulation;
}3. 軟鍵盤(pán)彈出問(wèn)題
軟鍵盤(pán)彈出時(shí)可能遮擋輸入框。
const input = document.querySelector('input');
input.addEventListener('focus', () => {
setTimeout(() => {
window.scrollTo(0, document.body.scrollHeight);
}, 300);
});4. 滾動(dòng)穿透問(wèn)題
彈窗出現(xiàn)時(shí)，背景仍可滾動(dòng)。
// 彈窗出現(xiàn)時(shí)
document.body.style.position = 'fixed';
document.body.style.width = '100%';
document.body.style.top = -window.scrollY + 'px';
// 彈窗關(guān)閉時(shí)
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. 頁(yè)面適配問(wèn)題
不同設(shè)備屏幕尺寸不一致導(dǎo)致的適配問(wèn)題。
/* 方案1：使用rem適配 */
html {
font-size: calc(100vw / 375 * 16);
}
/* 方案2：使用vw適配 */
.container {
width: 100vw;
height: 100vh;
}6. iOS橡皮筋滾動(dòng)效果
iOS滾動(dòng)到頂部或底部時(shí)的回彈效果影響體驗(yàn)。
body {
overflow: hidden;
position: fixed;
width: 100%;
}
.scroll-container {
height: 100vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}7. 安全區(qū)域適配問(wèn)題
劉海屏、底部虛擬按鍵區(qū)域遮擋內(nèi)容。
/* iOS安全區(qū)域適配 */
.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. 微信長(zhǎng)按圖片保存問(wèn)題
微信瀏覽器中長(zhǎng)按圖片會(huì)出現(xiàn)保存選項(xiàng)。
img {
-webkit-touch-callout: none;
pointer-events: none;
user-select: none;
}9. 滾動(dòng)條樣式問(wèn)題
默認(rèn)滾動(dòng)條樣式不美觀。
.scroll-container::-webkit-scrollbar {
display: none;
}
/* 或自定義滾動(dòng)條樣式 */
.scroll-container::-webkit-scrollbar {
width: 4px;
}
.scroll-container::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.2);
border-radius: 2px;
}10. 圖片資源加載優(yōu)化
大圖片加載影響頁(yè)面性能。
// 使用懶加載
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. 表單輸入優(yōu)化
移動(dòng)端輸入體驗(yàn)不佳。
<!-- 數(shù)字鍵盤(pán) -->
<input type="tel" pattern="[0-9]*">
<!-- 禁用自動(dòng)完成 -->
<input autocomplete="off">
<!-- 禁用自動(dòng)大寫(xiě) -->
<input autocapitalize="off">12. 字體大小自適應(yīng)
系統(tǒng)字體大小改變影響布局。
/* 禁止字體大小隨系統(tǒng)設(shè)置改變 */
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
/* 使用媒體查詢(xún)適配不同屏幕 */
@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; }
}歡迎大家補(bǔ)充。
責(zé)任編輯：趙寧寧
來(lái)源：
JavaScript
