移動端經常使用設置

1.強制豎屏瀏覽 x5-orientation

2.強制全屏顯示 x5-fullscreen

 

3. uc 全屏顯示

screen -orientation

 

4,禁止電話和郵箱

5.font boosting

 

7.fixed

方法一： 頭部根據html來定位，可是會有回彈

 

ios的body 的overflow問題

通常把內容包一層

 

 

8.新老flex

 

彈性佈局：老版比新版的兼容性好

新版：display:flex;

主軸：水平/垂直/反序 （注意若是高度或者寬度很大，將會從最下面開始反序）
flex-direction:row/colmun/row-reverse/colmun-reverse

水平富餘空間管理：justify-content:flex-strat/flex-end/center/space-between/space-around
垂直富餘空間管理：align-items:flex-strat/flex-end/center/space-between/space-around

彈性盒模型--box

子類 ：flex:1

元素的具體位置設置：
order:1,2,3,4....數字越小，越靠前，能夠接受負數，排列位置

老版： display:-webkit-box

水平：
-webkit-box-orient:horizontal/
垂直：
-webkit-box-orient:verical/

水平反序：-webkit-box-direction:reverse
垂直反序：-webkit-box-direction:normal

注意：老版的高度和寬度不影響反序的位置，都是從初始開始

水平富餘空間管理:-webkit-box-pack:start/end/center/justify(至關於space-between)

垂直富餘空間管理:-webkit-box-align:start/end/center/justify(至關於space-between)

 

彈性盒模型--box

-webkit-box-flex:1

元素的具體位置設置：
-webkit-box-group:1,2,3,4....數字越小，越靠前，默認最小值爲1，排列位置

 

如下內容轉載自http://www.cnblogs.com/lhb25/p/seven-method-for-1px-retina-screen.html

六、viewport + rem 實現

同時經過設置對應viewport的rem基準值，這種方式就能夠像之前同樣輕鬆愉快的寫1px了。
在devicePixelRatio = 2 時，輸出viewport：

1	< meta  name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

在devicePixelRatio = 3 時，輸出viewport：

1	< meta  name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">

這種兼容方案相對比較完美，適合新的項目，老的項目修改爲本過大。
對於這種方案，能夠看看《使用Flexible實現手淘H5頁面的終端適配》
優勢：

• 全部場景都能知足
• 一套代碼，能夠兼容基本全部佈局

缺點：

• 老項目修改代價過大，只適用於新項目

七、僞類 + transform 實現

對於老項目，有沒有什麼辦法能兼容1px的尷尬問題了，我的認爲僞類+transform是比較完美的方法了。
原理是把原先元素的 border 去掉，而後利用 :before 或者 :after 重作 border ，並 transform 的 scale 縮小一半，原先的元素相對定位，新作的 border 絕對定位。
單條border樣式設置：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

.scale -1px {    position :  relative ;    border : none ; } .scale -1px :after{    content :  '' ;    position :  absolute ;    bottom :  0 ;    background :  #000 ;    width :  100% ;    height :  1px ;    -webkit-transform: scaleY( 0.5 );    transform: scaleY( 0.5 );    -webkit-transform-origin:  0  0 ;    transform-origin:  0  0 ; }

四條boder樣式設置:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

.scale -1px {    position :  relative ;    margin-bottom :  20px ;    border : none ; } .scale -1px :after{    content :  '' ;    position :  absolute ;    top :  0 ;    left :  0 ;    border :  1px  solid  #000 ;    -webkit-box-sizing: border-box;    box-sizing: border-box;    width :  200% ;    height :  200% ;    -webkit-transform: scale( 0.5 );    transform: scale( 0.5 );    -webkit-transform-origin:  left  top ;    transform-origin:  left  top ; }

最好在使用前也判斷一下，結合 JS 代碼，判斷是否 Retina 屏：

1 2 3

if (window.devicePixelRatio && devicePixelRatio >= 2){    document.querySelector( 'ul' ).className =  'scale-1px' ; }

優勢：

• 全部場景都能知足
• 支持圓角(僞類和本體類都須要加border-radius)

缺點：

• 對於已經使用僞類的元素(例如clearfix)，可能須要多層嵌套