移动端总结和手机兼容问题
移動端總結和手機兼容問題
?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;
轉載于:https://www.cnblogs.com/qiuchuanji/p/7842882.html
總結
以上是生活随笔為你收集整理的移动端总结和手机兼容问题的全部內容，希望文章能夠幫你解決所遇到的問題。
