移動端部分兼容問題

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

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

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

 

二、三句代碼合用達到清除HTML頁面緩存效果

<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">

 

三、隱藏狀態欄（針對iOS）

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

 

四、容許全屏瀏覽頁面的標籤（針對iOS） 

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

 

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

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

　　（iOS上會明顯 有時候會把數字當成電話號碼）

 

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

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

 

七、 添加到主屏後的標題（IOS）

<meta name="apple-mobile-web-app-title" content="標題"> 

 

八、啓用 WebApp 全屏模式（IOS）

當網站添加到主屏幕後再點擊進行啓動時，可隱藏地址欄（從瀏覽器跳轉或輸入連接進入並無此效果）

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

 

九、 百度禁止轉碼

經過百度手機打開網頁時，百度可能會對你的網頁進行轉碼，往你頁面貼上它的廣告，很是之噁心。不過咱們能夠經過這個meta標籤來禁止它：

<meta http-equiv="Cache-Control" content="no-siteapp" />

百度SiteApp轉碼聲明

 

十、 設置狀態欄的背景顏色（IOS）

設置狀態欄的背景顏色，只有在 "apple-mobile-web-app-capable" content="yes" 時生效

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

content 參數：

1. default ：狀態欄背景是白色。
2. black ：狀態欄背景是黑色。
3. black-translucent ：狀態欄背景是半透明。 若是設置爲 default 或 black ,網頁內容從狀態欄底部開始。 若是設置爲 black-translucent ,網頁內容充滿整個屏幕，頂部會被狀態欄遮擋。

十一、 移動端手機號碼識別（IOS）

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

1. 7位數字，形如：1234567
2. 帶括號及加號的數字，形如：(+86)123456789
3. 雙鏈接線的數字，形如：00-00-00111
4. 11位數字，形如：13800138000

可能還有其餘類型的數字也會被識別。咱們能夠經過以下的meta來關閉電話號碼的自動識別：

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

開啓電話功能

<a href="tel:123456">123456</a>

開啓短信功能：

<a href="sms:123456">123456</a> 

十二、 移動端郵箱識別（Android）

與電話號碼的識別同樣，在安卓上會對符合郵箱格式的字符串進行識別，咱們能夠經過以下的meta來管別郵箱的自動識別：

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

一樣地，咱們也能夠經過標籤屬性來開啓長按郵箱地址彈出郵件發送的功能：

<a mailto:dooyoe@gmail.com">dooyoe@gmail.com</a> 

 

1三、 添加智能 App 廣告條 Smart App Banner（IOS 6+ Safari）

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

 

1四、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">

 

1五、webkit表單元素的默認外觀怎麼重置　

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

 

1六、在input框得到焦點時文字被清空用value 在input框輸入文字時被清空用placeholder

　　webkit表單輸入框placeholder的文字能換行麼？ios能夠，android不行~,在textarea標籤下均可以換行~

html,body{

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

　　-webkit-overflow-scrolling:touch;/*流暢滾動,ios7下會有滑一下滑不動的狀況，因此須要寫上*/

　　position:realtive;/*直接子級若是是絕對定位有運動到屏幕外的話，會出現留白*/ 

　　}

1七、手機上的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;/*解決兼容性問題*/

　　}

View Code

1八、輸入框的兼容性解決　　

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框輸入瞬間變白的現象*/

　　}

View Code

 

1九、禁用 radio 和 checkbox 默認樣式　　

input[type="radio"]::-ms-check,input[type="checkbox"]::-ms-check{

　　display: none;/*這樣就能夠用class自定義樣式*/

　　}

 

20、webkit表單輸入框placeholder的顏色值　　

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

 

2一、手機上的多行省略　

　.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*/

　　}

2二、文本標籤line-height：1或者是line-height等於height文字會被切掉

　　手機上浮動元素能寫寬儘可能寫寬否則很容易出現兼容性問題,儘可能不要寫高，由於內容多少不固定

      給不一樣屏幕大小的手機設置特殊樣式

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

 

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

 

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

 

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

 

2六、手機上用背景圖寫運動

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

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

 

2七、彈層的關閉事件

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

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

 

2八、麪包屑導航

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

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

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

 

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