移動端開發遇到的坑

阿新 • • 發佈：2021-11-24

1. new Date（）在IOS上出現值為NAN的問題

我們常用new Date()去獲取時間戳，例如

newDate("2017-08-1112:00:00");
複製程式碼

但在IOS下，這是使用獲取到的值是NAN。原因：因為IOS下的new Date()不支援"-“這個字元 解決方法：把”-“改成‘”/"就可以了。例如

newDate("2017-08-1112:00:00".replace(/-/g,"/"));
複製程式碼

2. Android部分機型使用height和line-height等值設定垂直居中，但會顯示偏高的問題

在開發過程中，我們想讓文字進行垂直居中時，往往會設定height和line-height等值來實現。這種方式在PC端看到的時候沒有問題，但在真機上測試時，會發現部分Android機型會出現文字偏高的問題。原因

：貌似是有部分Android機型有自己預設的line-height，我們額外設定的line-height不起作用。 解決辦法：設定line-height：normal，再通過padding去設定居中就可以了。

line-height：normal;padding:xxpx0;
複製程式碼

3. fixed 與 input

剛接觸移動端 Web 開發的小夥伴應該都會聽前輩們說過，不要在有 input 標籤的頁面使用 fixed 定位，因為這兩者在一起的時候，總是會有奇奇怪怪的問題。在 iOS 上，當點選 input 標籤獲取焦點喚起軟鍵盤的時候，fixed 定位會暫時失效，或者可以理解為變成了 absolute 定位，在含有滾動的頁面，fixed 定位的節點和其他節點一起滾動。其實這個問題也很好解決，只要保證 fixed 定位的節點的父節點不可滾動，那麼即使 fixed 定位失效，也不會和其他滾動節點一起滾動，影響介面。但是除此之外，還有很多坑比較難以解決，例如 Android 軟鍵盤喚起後遮擋住 input 標籤，使用者沒法看到自己輸入的字串，iOS 則需要在輸入至少一個字元之後，才能將對應的 input 標籤滾動到合適的位置，所以為了避開這些難以解決的坑，在有表單輸入的頁面，儘量用absolute 或者 flex 替換 fixed。

4、防止手機中網頁放大和縮小。

viewport 設定不縮放

<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
複製程式碼

5.iphone及ipad下輸入框預設內陰影

Element{

-webkit-tap-highlight-color:rgba(255,255,255,0)

}
複製程式碼

6. 某些Android手機圓角失效

background-clip:padding-box;
複製程式碼

7. 移動端300ms點選延遲

解決方案

設定meta標籤禁止縮放

<metaname="viewport"content="user-scalable=no">
<metaname="viewport"content="initial-scale=1,maximum-scale=1">
複製程式碼

FastClick

FastClick 是 FT Labs 專門為解決移動端瀏覽器 300 毫秒點選延遲問題所開發的一個輕量級的庫。FastClick的實現原理是在檢測到touchend事件的時候，會通過DOM自定義事件立即出發模擬一個click事件，並把瀏覽器在300ms之後的click事件阻止掉。

FastClick可能導致的問題

8. 點選穿透問題

解決方案一：來得很直接github上有個fastclick可以完美解決引入fastclick.js，因為fastclick原始碼不依賴其他庫所以你可以在原生的js前直接加上

window.addEventListener("load",function(){
FastClick.attach(document.body);
},false);
複製程式碼

解決方案二：對於B元素本身存在預設click事件的情況，應及用touchend代替tap事件並阻止掉時A元素touchend的預設行為preventDefault()，從而阻止click事件的產生。

$("#aa").on("touchend",function(event){
//很多處理比如隱藏什麼的
event.preventDefault();
});
複製程式碼

9. 電話號碼識別

在 iOS Safari （其他瀏覽器和 Android 均不會）上會對那些看起來像是電話號碼的數字處理為電話連結，比如：

7 位數字，形如：1234567
帶括號及加號的數字，形如：(+86)123456789
雙連線線的數字，形如：00-00-00111
11 位數字，形如：13800138000

關閉識別

<metaname="format-detection"content="telephone=no"/>
複製程式碼

開啟識別

<ahref="tel:123456">123456</a>
複製程式碼

10. 郵箱識別

安卓上會對符合郵箱格式的字串進行識別，我們可以通過如下的 meta 來管別郵箱的自動識別：

<metacontent="email=no"name="format-detection"/>
複製程式碼

同樣地，我們也可以通過標籤屬性來開啟長按郵箱地址彈出郵件傳送的功能：

<amailto:[email protected]">[email protected]</a>
複製程式碼

11. 常用meta 標籤的設定

meta對於移動端的一些特殊屬性，可根據需要自行設定

<metaname="screen-orientation"content="portrait">//Android禁止螢幕旋轉
<metaname="full-screen"content="yes">//全屏顯示
<metaname="browsermode"content="application">//UC應用模式，使用了application這種應用模式後，頁面講預設全屏，禁止長按選單，禁止收拾，標準排版，以及強制圖片顯示。
<metaname="x5-orientation"content="portrait">//QQ強制豎屏
<metaname="x5-fullscreen"content="true">//QQ強制全屏
<metaname="x5-page-mode"content="app">//QQ應用模式
複製程式碼

12.清除輸入框內陰影

在 iOS 上，輸入框預設有內部陰影,以這樣關閉：

div{
-webkit-appearance:none;
}
複製程式碼

13 .輸入框預設字型顏色

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder{
color:#c7c7c7;
}
input:-moz-placeholder,
textarea:-moz-placeholder{
color:#c7c7c7;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder{
color:#c7c7c7;
}
複製程式碼

14. 使用者設定字號放大或者縮小導致頁面佈局錯誤

設定字型禁止縮放

body{
-webkit-text-size-adjust:100%!important;
text-size-adjust:100%!important;
-moz-text-size-adjust:100%!important;
}
複製程式碼

15. android系統中元素被點選時產生邊框

部分android系統點選一個連結，會出現一個邊框或者半透明灰色遮罩, 不同生產商定義出來額效果不一樣。去除程式碼如下

a,button,input,textarea{
-webkit-tap-highlight-color:rgba(0,0,0,0)
-webkit-user-modify:read-write-plaintext-only;
}
複製程式碼

16. audio 和 video 在 ios 和 andriod 中自動播放

這個不是bug，由於自動播放網頁中的音訊或視訊，會給使用者帶來一些困擾或者不必要的流量消耗，所以蘋果系統和安卓系統通常都會禁止自動播放和使用 JS 的觸發播放，必須由使用者來觸發才可以播放。加入自動觸發播放的程式碼

$('html').one('touchstart',function(){
audio.play()
})
複製程式碼

17 iOS 上拉邊界下拉出現空白

手指按住螢幕下拉，螢幕頂部會多出一塊白色區域。手指按住螢幕上拉，底部多出一塊白色區域。

在 iOS 中，手指按住螢幕上下拖動，會觸發 touchmove 事件。這個事件觸發的物件是整個 webview 容器，容器自然會被拖動，剩下的部分會成空白。

document.body.addEventListener(
'touchmove',
function(e){
if(e._isScroller)return
//阻止預設事件
e.preventDefault()
},
{
passive:false
}
)
複製程式碼

18 onkeyUp 和 onKeydown 相容性問題

IOS 中 input 鍵盤事件 keyup、keydown、等支援不是很好, 用 input 監聽鍵盤 keyup 事件，在安卓手機瀏覽器中沒有問題，但是在 ios 手機瀏覽器中用輸入法輸入之後，並未立刻相應 keyup 事件

19 IOS12 輸入框難以點選獲取焦點，彈不出軟鍵盤

定位找到問題是 fastclick.js 對 IOS12 的相容性，可在 fastclick.js 原始碼或者 main.js 做以下修改

FastClick.prototype.focus=function(targetElement){
varlength
if(
deviceIsIOS&&
targetElement.setSelectionRange&&
targetElement.type.indexOf('date')!==0&&
targetElement.type!=='time'&&
targetElement.type!=='month'
){
length=targetElement.value.length
targetElement.setSelectionRange(length,length)
targetElement.focus()
}else{
targetElement.focus()
}
}
複製程式碼

20 IOS 鍵盤收起時頁面沒用回落，底部會留白

通過監聽鍵盤迴落時間滾動到原來的位置

window.addEventListener('focusout',function(){
window.scrollTo(0,0)
})

//input輸入框彈起軟鍵盤的解決方案。
varbfscrolltop=document.body.scrollTop
$('input')
.focus(function(){
document.body.scrollTop=document.body.scrollHeight
//console.log(document.body.scrollTop);
})
.blur(function(){
document.body.scrollTop=bfscrolltop
//console.log(document.body.scrollTop);
})
複製程式碼

21 . iOS 下fixed 失效的原因

軟鍵盤喚起後，頁面的 fixed 元素將失效，變成了 absolute，所以當頁面超過一屏且滾動時，失效的 fixed 元素就會跟隨滾動了。不僅限於 type=text 的輸入框，凡是軟鍵盤（比如時間日期選擇、select 選擇等等）被喚起，都會遇到同樣地問題。解決方法: 不讓頁面滾動，而是讓主體部分自己滾動,主體部分高度設為 100%，overflow:scroll

<body>
<divclass='warper'>
<divclass='main'></div>
<div>
<divclass="fix-bottom"></div>
</body>
.warper{
position:absolute;
width:100%;
left:0;
right:0;
top:0;
bottom:0;
overflow-y:scroll;
-webkit-overflow-scrolling:touch;/*解決ios滑動不流暢問題*/
}
.fix-bottom{
position:fixed;
bottom:0;
width:100%;
}