移動端瀏覽器之兼容性問題總結

前言:這裏收集一些業內見到的移動端瀏覽器的兼容性問題. 若是你們也也到過, 歡迎補充.

1 虛擬鍵盤引發的兼容問題。

2 touch 事件引發的問題.

3 iOS 和 android 系統致使的差異。好比，微信內置瀏覽器

4 H5頁面窗口自動調整到設備寬度，並禁止用戶縮放頁面

解決方案: <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

    （部分安卓手機的UC瀏覽器寫完之後仍是能夠放大縮小）

5 忽略將頁面中的數字識別爲電話號碼

解決方案: <meta name="format-detection" content="telephone=no" />（iOS上會明顯 有時候會把數字當成電話號碼）

6 忽略Android平臺中對郵箱地址的識別

解決方案: <meta name="format-detection" content="email=no" />

7 移動端瀏覽器部分兼容問題

  解決方案: viewport模板:   

<meta charset="utf-8">

<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">

<meta content="yes" name="apple-mobile-web-app-capable">

<meta content="black" name="apple-mobile-web-app-status-bar-style">

<meta content="telephone=no" name="format-detection">

<meta content="email=no" name="format-detection">

8 webkit表單元素的默認外觀怎麼重置

解決方案: .css{-webkit-appearance:none;} （ios上的下拉框會有圓角，因此要寫border-radius:0）

9 在input框得到焦點時文字被清空用value 

  在input框輸入文字時被清空用placeholde.

10 webkit表單輸入框placeholder的文字能換行麼？

  ios能夠，android不行~,在textarea標籤下均可以換行~

      

html,body{ overflow: hidden;/*手機上寫overflow-x:hidden;會有兼容性問題，若是子級若是是絕對定位有運動到屏幕外的話ios7系統會出現留白*/

  -webkit-overflow-scrolling:touch;/*流暢滾動,ios7下會有滑一下滑不動的狀況，因此須要寫上*/ position:realtive;/*直接子級若是是絕對定位有運動到屏幕外的話，會出現留白*/ }

11  手機上的flex佈局時會有兼容性問題，只用新版本的會出現安卓手機不識別的現象

 

.box{ display: -webkit-box; /* 老版本語法: Safari, iOS, Android browser, older WebKit browsers. */ display: -moz-box; /* 老版本語法: Firefox (buggy) */ display: -ms-flexbox; /* 混合版本語法: IE 10 */ display: -webkit-flex; /* 新版本語法: Chrome 21+ */ display: flex; /* 新版本語法: Opera 12.1, Firefox 22+ */ }

.box>li{ -webkit-box-flex: 1.0; box-flex: 1.0; -webkit-flex: 1.0; flex: 1; width: 0;/*解決兼容性問題*/ }

12 輸入框的兼容性解決

 

input[type="text"], input[type="date"], input[type="tel"], input[type="email"], input[type="password"]{ -webkit-appearance: none; display: block; width: 100%; height: 0.8rem; line-height:normal;/*手機上的line-height不能寫成和height的值同樣，會出現再次輸入光標靠上的現象*/ background: none; font-size: 0.32rem; padding-left: 0.28rem; border-radius: 0; -webkit-border-radius: 0; border: 1px solid #d5d5d5; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; outline: none; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0);/*解決加入js後input框輸入瞬間變白的現象*/ }

 

13 禁用 radio 和 checkbox 默認樣式

input[type="radio"]::-ms-check,input[type="checkbox"]::-ms-check{ display: none;/*這樣就能夠用class自定義樣式*/ }

 

14 webkit表單輸入框placeholder的顏色值

input::-webkit-input-placeholder{color:#999;} input:focus::-webkit-input-placeholder{color:#999;}

 

15 手機上的多行省略

.overflow-hidden{ display: box !important; display: -webkit-box !important; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 4;/*第幾行出現省略號*/

/*text-align:justify;不能和溢出隱藏的代碼一塊兒寫，會有bug*/ }

 

16  文本標籤line-height：

 1或者是line-height等於height文字會被切掉

17  手機上浮動元素能寫寬儘可能寫寬否則很容易出現兼容性問題,儘可能不要寫高，由於內容多少不固定給不一樣屏幕大小的手機設置特殊樣式

@media only screen  and (min-device-width : 320px)  and (max-device-width : 375px){}

18 <button></button>元素必定要寫上type屬性否則會默認提交表單，出現想不到的bug

19 某些安卓手機的自帶瀏覽器不識別onkeydown onkeypress onkeyup事件，這些事件會致使不能輸入漢字

20 

 input框如果不想輸入文字 只能讀不能寫能夠加readonly屬性

 手機上用背景圖寫運動，若是須要背景圖定位來實現運動效果能夠用rem進行計算後加上basckground-size:圖的個數*100% 0；

 寫背景圖時最好加上top left 或者0 0 否則寫運動效果時容易出現跳

21 

 彈層的關閉事件容易觸發彈層關閉後下一層的事件因此要給彈層關閉事件加上event.preventDefault()

 彈層彈出後不容許屏幕滾動給彈層加mousemove事件event.preventDefault()

22 包屑導航若是按照bootstrap給li加：after僞元素的話在其餘瀏覽器和在UC瀏覽器中表現的不同，UC的的會比其餘的瀏覽器寬，所佔位置更多

23 

 若是一個手機看到的和其餘手機不同 會比其餘的手機大或者小，查看他的瀏覽器字體設置是否正常，應該是他把手機瀏覽的字號調小或者調大了（坑人的所謂的bug）

24 

 IOS手機中若是出現一個元素的層級很是高可仍是被別的元素遮蓋的，那麼就將該元素與別的元素同級

蘋果手機固定定位有bug 檢查html和body是否是設置了overflow-x:hidden;

 

 

 

 

 

參考文章:

https://www.v2ex.com/t/359985?p=1

https://www.cnblogs.com/zhangxinerfenxiang/p/6245622.html