移動端總結和手機相容問題

標籤：ips   蘋果手機   允許   safari   order   內建   style   運動   value   

H5頁面視窗自動調整到裝置寬度，並禁止使用者縮放頁面

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

（部分安卓手機的UC瀏覽器寫完以後還是可以放大縮小）

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

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

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

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

viewport模板

<meta charset="utf-8">

<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">//主要I是強制讓文檔的寬度與裝置寬度保持1:1，最大寬度1.0，禁止螢幕縮放。

<meta content="yes" name="apple-mobile-web-app-capable">//這個也是iphone私人標籤，允許全屏瀏覽。

<meta content="black" name="apple-mobile-web-app-status-bar-style">//iphone的私人標籤，iphone頂端狀態條的樣式。

<meta content="telephone=no" name="format-detection">//禁止數字自動識別為電話號碼，這個比較有用，因為一串數字在iphone上會顯示成藍色，樣式加成別的顏色也是不生效的。

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

 

webkit表單元素的預設面板怎麼重設

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

 

在input框獲得焦點時文字被清空用value 在input框輸入文字時被清空用placeholder

 

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

 

html,body{

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

-webkit-overflow-scrolling:touch;/*流暢滾動,ios7下會有滑一下滑不動的情況，所以需要寫上*/

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

 

}

 

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

}

 

 

 

輸入框的相容性解決

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

}

 

禁用 radio 和 checkbox 預設樣式

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

display: none;/*這樣就可以用class自訂樣式*/

}

 

webkit表單輸入框placeholder的顏色值

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

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

 

手機上的多行省略

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

}

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

 

手機上浮動元素能寫寬盡量寫寬不然很容易出現相容性問題,盡量不要寫高，因為內容多少不固定

 

給不同螢幕大小的手機設定特殊樣式

 

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

 

<button></button>元素一定要寫上type屬性不然會預設提交表單，出現想不到的bug

 

某些安卓手機的內建瀏覽器不識別onkeydown onkeypress onkeyup事件，這些事件會導致不能輸入漢字

input框若是不想輸入文字 只能讀不能寫可以加readonly屬性

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

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

 

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

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

麵包屑導航如果按照bootstrap給li加：after虛擬元素的話在其他瀏覽器和在UC瀏覽器中表現的不一樣，UC的的會比其他的瀏覽器寬，所佔位置更多

 

如果一個手機看到的和其他手機不一樣 會比其他的手機大或者小，查看他的瀏覽器字型設定是否正常，應該是他把手機瀏覽的字型大小調小或者調大了（坑人的所謂的bug）

 

IOS手機中如果出現一個元素的層級非常高可還是被別的元素遮蓋的，那麼就將該元素與別的元素同級

 

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

移動端總結和手機相容問題