Webモバイル端末は、デバイス画素比devicePixelRatioの応用を明確にする必要がある.
3997 ワード
ここでいう
コンセプト
デバイス上の物理画素とデバイス独立画素(device-independent pixels(dips))の割合、すなわちdevicePixelRatio=スクリーン物理画素/デバイス独立画素
例えばiPhone 4 S、解像度:960×640、画面幅計算、物理画素640 px、デバイス独立画素320 pxをとると、devicePixelRatio値は640 px/320 px=2、iPhone 3のように、算出されたdevicePixelRatio値は320 px/320 px=1となる
その他の携帯電話の型番の物理の画素を理解して、独立した画素、設備の画素比、http://screensiz.es/phone
携帯電話で私たちの一般的な画像はハイビジョンディスプレイの下でぼやけていますが、ハイビジョンディスプレイとは何ですか?
ハイビジョンディスプレイはretinaに起源があり、ウィキペディアを開き、Retinaディスプレイを検索します.アップル社が設計し、製造を委託したディスプレイで、十分な高画素密度を備えており、人体の肉眼では単独の画素点を見分けることができない液晶ディスプレイです.
HDディスプレイの原理は次のとおりです.超高画素密度を備える液晶パネル .と同じ大きさの画面に表示する画素点は、1つから複数の に変化する.
retinaディスプレイはハイビジョンディスプレイの一種にすぎません.
今、ハイビジョンディスプレイを知っています.では、一般的な画像がデバイス上でぼやけている原因を分析します.もし今、1枚の画像があれば、2台の携帯電話があり、1つは一般的なディスプレイで、1つはハイビジョンディスプレイで、同じ大きさのスクリーンでは、ハイビジョンディスプレイのビットマップが拡大され、画像がぼやけてしまいます.
一般的なHDディスプレイのビットマップの拡大率
Retinaディスプレイの画像が2:1に拡大されていることがわかりますが、実際には各ハイビジョンディスプレイの拡大倍数が異なり、1.3:1、1.5:1、2:1、3:1で、現在最も多いのは2:1ですが、HTC Butterfly、Nexus 5、Samsung Galaxy S 4、Sony Xperia Zといういくつかのシリーズのモバイルデバイスがあり、画像が拡大された倍数は3:1に達しています.
一般的なディスプレイと高画面の区別
デバイスPixelRatioの値によって、通常のディスプレイと高画面を区別することができます.デバイスPixelRatioの値が1に等しい場合(つまり最小値)、通常のディスプレイは、デバイスPixelRatioの値が1より大きい場合(通常1.5、2.0)、ハイビジョンディスプレイです.
モバイル側がHDバックグラウンドマップを呼び出す方法
ユーザー体験を向上させ、モバイル端末の流量を節約するために、異なるディスプレイに対して、私たちは不要な方案を採用して、画像が異なる表示画面の下で正常に現れることを保証することができて、この方法は原生アプリの中で異なる解像度に対して異なる画像を使う原理を設計することと似ています~
デバイスPixelRatioの値を判断することで、異なるサイズの画像をロードします.は通常のディスプレイ(devicePixelRatio=1.0、1.3)に対して、1倍の画像 をロードする. HDディスプレイ(devicePixelRatio>=1.5、2.0、3.0)に2倍の画像 をロード
3.0の携帯電話は現在少ないため、3.0でも2倍の画像を1枚ロードすることは受け入れられる.では、上記の案を通じて、私たちは2セットの画像、さらには3セットの画像を設計する必要はありませんか?
具体的には、制品需要のユーザー群、メンテナンスコスト、制品需要のオンライン化などを见て设计します.例えば、ユーザー群の多くはハイエンドの携帯电话から来ています.すべて2倍の画像をロードしてもいいです.
本文は2セットの画像をロードすることを提案します~
Media Queries呼び出しハイビジョン背景図
メディアクエリーとdevicePixelRatioを組み合わせると、通常のディスプレイとハイビジョンディスプレイを区別でき、次のCSS設計案が提供されます.
image-set呼び出しretina背景図
image-setは、Webkitのプライベート属性であり、Css 4の属性でもあります.現在、いくつかのサイトで使用されています.W 3 Cの説明を見てください.http://dev.w3.org/csswg/css-images/#image-set-notationは、Retina画面の下の画像表示を解決するために生まれたもので、私のテストによると、現在アップルのretinaディスプレイとandroidディスプレイの一部をサポートしています.つまり、互換性は普通です.
参照先:
デバイスピクセル比devicePixelRatio簡単な紹介
HDディスプレイの原理と設計案
devicePixelRatioとは、実際にはwindow.devicePixelRatioを指し、すべてのWebKitブラウザおよびOperaによってサポートされています.コンセプト
デバイス上の物理画素とデバイス独立画素(device-independent pixels(dips))の割合、すなわちdevicePixelRatio=スクリーン物理画素/デバイス独立画素
例えばiPhone 4 S、解像度:960×640、画面幅計算、物理画素640 px、デバイス独立画素320 pxをとると、devicePixelRatio値は640 px/320 px=2、iPhone 3のように、算出されたdevicePixelRatio値は320 px/320 px=1となる
その他の携帯電話の型番の物理の画素を理解して、独立した画素、設備の画素比、http://screensiz.es/phone
携帯電話で私たちの一般的な画像はハイビジョンディスプレイの下でぼやけていますが、ハイビジョンディスプレイとは何ですか?
ハイビジョンディスプレイはretinaに起源があり、ウィキペディアを開き、Retinaディスプレイを検索します.アップル社が設計し、製造を委託したディスプレイで、十分な高画素密度を備えており、人体の肉眼では単独の画素点を見分けることができない液晶ディスプレイです.
HDディスプレイの原理は次のとおりです.
retinaディスプレイはハイビジョンディスプレイの一種にすぎません.
今、ハイビジョンディスプレイを知っています.では、一般的な画像がデバイス上でぼやけている原因を分析します.もし今、1枚の画像があれば、2台の携帯電話があり、1つは一般的なディスプレイで、1つはハイビジョンディスプレイで、同じ大きさのスクリーンでは、ハイビジョンディスプレイのビットマップが拡大され、画像がぼやけてしまいます.
一般的なHDディスプレイのビットマップの拡大率
Retinaディスプレイの画像が2:1に拡大されていることがわかりますが、実際には各ハイビジョンディスプレイの拡大倍数が異なり、1.3:1、1.5:1、2:1、3:1で、現在最も多いのは2:1ですが、HTC Butterfly、Nexus 5、Samsung Galaxy S 4、Sony Xperia Zといういくつかのシリーズのモバイルデバイスがあり、画像が拡大された倍数は3:1に達しています.
一般的なディスプレイと高画面の区別
デバイスPixelRatioの値によって、通常のディスプレイと高画面を区別することができます.デバイスPixelRatioの値が1に等しい場合(つまり最小値)、通常のディスプレイは、デバイスPixelRatioの値が1より大きい場合(通常1.5、2.0)、ハイビジョンディスプレイです.
モバイル側がHDバックグラウンドマップを呼び出す方法
ユーザー体験を向上させ、モバイル端末の流量を節約するために、異なるディスプレイに対して、私たちは不要な方案を採用して、画像が異なる表示画面の下で正常に現れることを保証することができて、この方法は原生アプリの中で異なる解像度に対して異なる画像を使う原理を設計することと似ています~
デバイスPixelRatioの値を判断することで、異なるサイズの画像をロードします.
3.0の携帯電話は現在少ないため、3.0でも2倍の画像を1枚ロードすることは受け入れられる.では、上記の案を通じて、私たちは2セットの画像、さらには3セットの画像を設計する必要はありませんか?
具体的には、制品需要のユーザー群、メンテナンスコスト、制品需要のオンライン化などを见て设计します.例えば、ユーザー群の多くはハイエンドの携帯电话から来ています.すべて2倍の画像をロードしてもいいです.
本文は2セットの画像をロードすることを提案します~
Media Queries呼び出しハイビジョン背景図
メディアクエリーとdevicePixelRatioを組み合わせると、通常のディスプレイとハイビジョンディスプレイを区別でき、次のCSS設計案が提供されます.
.css{/* ( 1.3) 1 */
background-image: url(img_1x.png);
}
@media only screen and (-webkit-min-device-pixel-ratio:1.5){
.css{/* ( 1.5) 2 */
background-image: url(img_2x.png);
}
}image-set呼び出しretina背景図
image-setは、Webkitのプライベート属性であり、Css 4の属性でもあります.現在、いくつかのサイトで使用されています.W 3 Cの説明を見てください.http://dev.w3.org/csswg/css-images/#image-set-notationは、Retina画面の下の画像表示を解決するために生まれたもので、私のテストによると、現在アップルのretinaディスプレイとandroidディスプレイの一部をサポートしています.つまり、互換性は普通です.
.css{
background: url(../img/bank_ico.png) no-repeat;/* image-set */
background: -webkit-image-set(
url(../img/bank_ico.png) 1x,/* image-set [ ] */
url(../img/bank_ico_retina.png) 2x);/* image-set [Retina ] */
}参照先:
デバイスピクセル比devicePixelRatio簡単な紹介
HDディスプレイの原理と設計案