モバイル端末開発シリーズノート(2)――モバイル端末特別仕様処理

出典:慕課網『Hello,モバイルWeb』

前言:モバイル開発ピクセル知識

px:css画素、論理画素は、ブラウザが使用する抽象単位であり、異なるデバイスが可変である
dp/pt:デバイスに関係なく物理画素
dpr:デバイスpixel ratioデバイス画素スケーリング比;異なる設備が可変である.
換算式:1 px=(dpr)2*dp
例えばiphone 2 640*1136 dp dpr=2
css幅は320*568 px
retina画面:dprは2
詳細については、次の手順に従います.http://www.cnblogs.com/cench/p/5314044.html

一、モバイル端末のハイビジョン画像のレンダリング

Retinaスクリーンでは、1 pxは2 dp、100 px*100 pxピクチャは200 dp*200 dpレンダリングで、ピクチャがぼやけています
シナリオA:ハイビジョン画像をロードし、2倍の画像(@2 x)をロードし、画像コンテナを50%縮小します.
画像サイズ、400*600

width:200px;
height:300px;

欠点:

通常の画面の下で同じように(@2 x)画像をロードし、リソースの浪費

をもたらした.

画像はいくつかの鋭さを失う

シナリオB:異なるdprで、異なるサイズの画像をロードします.
cssメディアクエリーはjavascript条件で判断できます.
cssメディアクエリー

@media (-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */
       (min--moz-device-pixel-ratio: 2),    /* Older Firefox browsers (prior to Firefox 16) */
       (min-resolution: 2dppx),             /* The standard way */
       (min-resolution: 192dpi)             /* dppx fallback */

  ：https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries
-moz-device-pixel-ratio          16 Firefox   ,-webkit-device-pixel-ratio  webkit       dppx。

欠点:2セットの画像(@1 xと@2 x)を用意する

二、移動端は1 pxフレームを実現する

質問:retinaスクリーン:1 pxは2 dpでレンダリングされ、洗練されていない
シナリオA:IOS 8:border:0.5 px;シナリオB:その他Android:ダミー:1 px+Y軸スケーリング0.5
次のようになります.

.li{
//IOS8
border:0.5px;
}

.li:before{
//Others
    height:1px;
    -webkit-transform:scaleY(0.5);
}

三、相対単位——remはレイアウトに用いる

方案一:remベース値は異なる設備によって適応する

3つの計算式を満たす
remBasicValue = screen.width/20;
Awidth = Apx/remBasicValue;
Aheight = Apx/remBasicValue;

シナリオ2:remベース値は定値を採用する

html{
//  :
font-size:32px;
}

//IE6
@ media (min-device-width:375px){
html{font-size:37.5px}
}
//IE6 plus
@ media (min-device-width:414px){
html{font-size:41.4px}
}

注意:remレイアウトでは、フォントなどの非レイアウト要素のfont-sizeはpx単位、レイアウト要素はrem相対単位を使用します.

四、移動端のテキストオーバーフロー問題

//      
.inline{
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;// ...
}

//      ；
.inlineTwoLine{

display:-webkit-box !important;
overflow:hidden;
text-overflow:ellipsis;
word-break:break-all;

-webkit-box-orient:vertical;
-webkit-line-clamp:4;// 4   ;
}

}