平時(shí)在移動(dòng)端開發(fā)頁面的過程中闸溃，總會(huì)遇到一些問題霹期，主要是各手機(jī)webview樣式顯示效果不一致造成的织阅。
以下總結(jié)了一些常見的坑和一些小技巧追他，希望能夠幫助大家...
本文只針對(duì)兩大手機(jī)陣營(yíng) Android 和 IOS 中的魅藍(lán)metal 和iPhone6進(jìn)行樣式對(duì)比便瑟。
一缆毁、line-height
line-height 經(jīng)常用于文字居中，當(dāng)然也有同學(xué)會(huì)用上下padding去寫到涂，but脊框！不管你用padding還是line-height，不同手機(jī)顯示效果還是...不一樣
.demo {
height: 16px;
line-height: 14px;
font-size: 9px;
border: 1px solid #ff6815;
}
嗯践啄，在我們的chrome由于字體小于9px已經(jīng)看不出邊框和字之間的間隙了浇雹，再來看看Android和IOS的效果：
魅藍(lán)文字已經(jīng)飛起來了...
ios顯示正常
如果把line-height加1px，iPhone文字就會(huì)下移屿讽，由于我們app的ios用戶居多昭灵，并且android機(jī)型太多，不同機(jī)型也會(huì)顯示不同伐谈，所以只能退而求其次了烂完。
line-height的兼容問題不太好解決，容器高度越小诵棵，顯示效果的差距越明顯抠蚣。稍微大一點(diǎn)的高度，最好把line-height設(shè)置為高度+1px非春，兩個(gè)平臺(tái)顯示都還不錯(cuò)柱徙。
第一個(gè)問題，把字體大小奇昙，寬高行高等都寫成原來的2倍护侮，然后用scale(.5)縮小為正常大小，可以解決android機(jī)的line-height問題储耐，ios和android都能居中
二羊初、多行省略
一般我們的產(chǎn)品列表樣式，會(huì)有標(biāo)題行數(shù)的限制什湘。
實(shí)現(xiàn)方式：
.demo {
display: -webkit-box; //1.設(shè)置display類型為-webkit-box
font-size: 14px;
line-height: 18px;
overflow: hidden; //2.設(shè)置元素超出隱藏
text-overflow: ellipsis; //3.設(shè)置超出樣式為省略號(hào)
-webkit-line-clamp: 2; //4.設(shè)置2行應(yīng)用省略
-webkit-box-orient: vertical;
}
這樣設(shè)置還要考慮一個(gè)極端的情況长赞，就是標(biāo)題不足兩行。具體要看PM的需求闽撤，一是空出第二行的距離得哆，二是讓標(biāo)題下邊的元素頂上去。如果是第一種需求哟旗，有2種解決的方案贩据。
1：把下邊的元素都使用position:absoulte定位到固定的位置栋操，不受標(biāo)題行數(shù)影響。
2：把標(biāo)題容器的高度寫死饱亮，這樣寫必須要考慮行高的坑矾芙，因?yàn)槿萜鞲叨葘懰酪院螅煌瑱C(jī)型行高實(shí)際上顯示效果不一樣近上。
高度寫少了剔宪，有的機(jī)型會(huì)這樣.
高度寫多了，可能會(huì)這樣子.
我的做法是壹无，不影響布局的情況下盡量控制line-height值大一些葱绒，行與行的間距變大，容器高度的設(shè)定需要多測(cè)試一些機(jī)型格遭，控制文字不多出也不被擋住哈街。
三留瞳、角標(biāo)的實(shí)現(xiàn)
不少項(xiàng)目ui會(huì)要求我們畫這種梯形角標(biāo)拒迅，那么問題來了：
1.我們不確定角標(biāo)內(nèi)容的長(zhǎng)度
2.角標(biāo)的底色不能定死，能定死（能定死的話直接切個(gè)小體形就行了）
通常就是一段文案后邊拼接一個(gè)三角形她倘，三角形很好寫：
.script {
width: 0;
height: 0; // 控制寬高為0璧微，用border寬度撐出一個(gè)三角形
border-right: 10px solid transparent;
border-top: 15px solid #c59c53;
}
我看到的第一種寫法是把三角形直接拼在前邊的文案后邊，當(dāng)然這在iphone上是沒有問題的硬梁。但在部分安卓機(jī)型上卻會(huì)有1像素的間隙前硫，就像這樣：
感受到來自安卓陣營(yíng)深深的惡意
解決方案：
<p class="rongqi">
<span class="wenan">跟團(tuán)游</span>
<span class="script"></span>
</p>
.rongqi {//容器
height: 15px;
overflow: hidden;//設(shè)置超出隱藏
position: absolute;
top: 0;
left: 0;
}
.wenan{//文案
float: left;
position: relative; //設(shè)置相對(duì)定位
z-index: 3; //設(shè)置層級(jí)不被三角形擋住
height: 15px;
padding-left: 4px;
line-height: 16px;
color: #fff;
font-size: 10px;
}
.script {
width: 0;
height: 0;
border-right: 20px solid transparent;
border-top: 30px solid #c59c53; //這里的30px實(shí)際上遠(yuǎn)遠(yuǎn)超出容器的高度
float: right; //就是為了高度超出被擋住做出梯形的效果，兼容各種機(jī)型
margin-left: -9px;
}
如果去除容器的overflow:hidden就可以看的更明白：
四荧止、圖文標(biāo)題
一些常見的布局例如圖+文案的屹电，有多種方式可以去寫，比如 ==padding-left+background== 或者 ==position+padding-left== 或者 ==before== 偽元素跃巡。
前兩種方法都可以把圖片做到絕對(duì)的垂直居中危号，但是它們都是相對(duì)整行的容器進(jìn)行定位的，由于 ==line-height== 兼容問題的坑素邪，圖片實(shí)際上不一定會(huì)和文字對(duì)齊。如果有圖文對(duì)齊的需求的話，個(gè)人建議才用 ==before== 偽元素來布局住拭，==before== 可以相對(duì)文案來定位摇零。
p{
height:44px;
line-height:45px;
padding-left:40px;
}
p::before{
content: '';
display: inline-block;
background: url("../img/xxx.png") center center no-repeat;
background-size: contain; //這里把背景圖片尺寸設(shè)置成contain，不需要考慮圖片拉伸的問題
width: 14px;
height: 18px;
margin: 0 5px -4px 0;
}
還有一種情況沽甥，我們的圖文布局声邦，是從數(shù)組中遍歷出來的，類似下圖：
這種情況更適合position去寫摆舟，所以寫樣式一定要根據(jù)不同情況去選擇合適的方式亥曹。
五英融、左右寬度自適應(yīng)
第四個(gè)小技巧結(jié)尾，圖中的布局實(shí)際上是分左右兩塊的歇式，依照ui的需求驶悟，文案是要左對(duì)齊，數(shù)字是要右對(duì)齊的材失。你可能最先想到的是把右側(cè)的數(shù)字定位或者浮動(dòng)到那里痕鳍，左側(cè)的容器加上個(gè) ==margin-right== 或者 ==padding-right==。這樣也可以實(shí)現(xiàn)龙巨，但是兩側(cè)的文案有極端情況出現(xiàn)笼呆。
效果可能這樣子：
因?yàn)槟愀静恢纼蓚?cè)的文案的長(zhǎng)度到底是多少，
我的方案是用box布局旨别，左側(cè)的容器設(shè)置box-flex: 1, 右側(cè)不管它：
<li class="ent-li">
[站外圖片上傳中……(21)]
<div class="left">主題門票</div>
<div class="right">10</div>
</li>
.ent-li {
margin-left: 45px;
height: 44px;
display: -webkit-box; // box布局并做好兼容
display: box;
position: relative;
}
.ent-li .left {
-webkit-box-flex: 1; // box-flex:1;控制寬度自適應(yīng)
box-flex: 1;
text-align: left;
line-height: 45px;
font-size: 16px;
color: #333;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// 右側(cè)什么都不用管
.ent-li .right {
text-align: right;
line-height: 45px;
font-size: 12px;
color: #999;
padding-left: 10px;
}
最終顯示效果：
或者
因?yàn)閜m覺得數(shù)字更重要诗赌，所以讓文案去自適應(yīng)，數(shù)字有多長(zhǎng)就多長(zhǎng)
六秸弛、display: inline-block
眾所周知铭若，元素有3種基本顯示框類型，==block== 塊級(jí)递览，==inline-block== 行內(nèi)塊級(jí)叼屠，==inline== 行內(nèi)。
==inline-block== 是一種特殊存在绞铃，可以設(shè)置寬高也可以使元素在一行排列镜雨。
在開發(fā)中會(huì)遇到以下兩種布局：
這兩種布局都可以用float:left來寫，但是浮動(dòng)完了還需要清楚浮動(dòng)儿捧。所以可以直接把元素設(shè)置成inline-block同樣可以自動(dòng)排列
.rongqi{//每塊容器
display: inline-block;//設(shè)置行內(nèi)塊級(jí)
width: 25%; //設(shè)置寬度為1/4
font-size: 12px;
text-align: center;
}
這里會(huì)有個(gè)小坑荚坞，就是行內(nèi)元素在水平和垂直排列的時(shí)候會(huì)有間距。造成這種結(jié)果
左邊是默認(rèn)情況下的效果菲盾，右側(cè)是改進(jìn)后的效果颓影，左邊第二行和第一行中間有段莫名的間距，這并不是我們真正想要的亿汞。
解決的辦法很簡(jiǎn)單：
.father{
font-size:0;//父容器字體大小設(shè)置成0瞭空，具體的字體大小應(yīng)用在文案上
}
七、模擬滾動(dòng)
模擬滾動(dòng)也是在項(xiàng)目中遇到的常見布局疗我。布局要求彈層出來后咆畏，彈層中的內(nèi)容可以滾動(dòng)，彈層背后的列表不能隨彈層滾動(dòng)而滾動(dòng)吴裤。并且在彈層上滑動(dòng)的時(shí)候旧找，整個(gè)頁面也不能隨之滾動(dòng)。
直接上代碼：
<section class="father">
<section class="content-body">
<!--頁面內(nèi)容麦牺、蒙層钮蛛、蒙層中的內(nèi)容互為兄弟節(jié)點(diǎn)鞭缭，防止點(diǎn)擊時(shí)頁面穿透-->
</section>
<section class="layout">
<!--頁面內(nèi)容、蒙層魏颓、蒙層中的內(nèi)容互為兄弟節(jié)點(diǎn)岭辣，防止點(diǎn)擊時(shí)頁面穿透-->
</section>
<section class="layout-body">
<!--頁面內(nèi)容、蒙層甸饱、蒙層中的內(nèi)容互為兄弟節(jié)點(diǎn)沦童，防止點(diǎn)擊時(shí)頁面穿透-->
</section>
</section>
.father{
height: 533px;
overflow-y: scroll;//頁面高度設(shè)置為屏幕高度，正常情況下超出滾動(dòng)
}
.content-body{
height: 533px;
overflow-y: scroll;//內(nèi)容高度設(shè)置為屏幕高度叹话，正常情況下超出滾動(dòng)
}
.layout{
height: 100%;
width: 100%;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
overflow: hidden;
z-index: 1000000;
}
.layout-body{
height: 46%;
width: 100%;
position: fixed;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
overflow: hidden;
z-index: 1000001;
}
當(dāng)我們觸發(fā)蒙層彈出時(shí)控制樣式
.father{
height: 533px;
overflow-y: hidden;//設(shè)置超出隱藏偷遗，那么頁面不會(huì)觸發(fā)滾動(dòng)
}
.content-body{
height: 533px;
overflow-y: hidden;//設(shè)置超出隱藏，那么頁面不會(huì)觸發(fā)滾動(dòng)
}
這個(gè)方法雖然實(shí)現(xiàn)了頁面模擬滾動(dòng)的效果驼壶，但是當(dāng)蒙層彈出的時(shí)候設(shè)置了 ==overflow:hidden== 會(huì)導(dǎo)致頁面 ==scrollTop== 變成0氏豌，頁面相當(dāng)于被滾到頂部了。
