12

クロスブラウザ互換の方法で、Webページにアクセスするデバイスのピクセル密度を検出して、2倍の画像をデバイスに強制することなく標準または高解像度の画像を提供できるようにする方法は?

これを自動化する JavaScript ライブラリはありますか?

4

3 に答える 3

18

Retina を設定する理由

iPhone 4s、iPhone 5、iPad3、iPad4、Macbook 15"、Macbook 13" はすべて Retina ディスプレイを使用しています。

@JamWaffles で言及されているように、Android は高解像度ディスプレイと Windows 8(Lumia 920) もサポートしています。

高解像度のサポートを追加することは、ユーザー エクスペリエンスには適していますが、開発者の負荷とモバイルの帯域幅が確実に増加します。誰かがそれをすることを提案しません。

ブリーフィング

この機能を実装するには、2 つの方法があります。1 つは Javascript で、もう 1 つは CSS です。現在のソリューションはすべて Retina 向けですが、Android の高解像度にも簡単に拡張できます。

CSS ソリューションは Media Query に関するものです-webkit-min-device-pixel-ratio。-webkit-device-pixel-ratio

  • 使い方は簡単。
  • すべてのブラウザに適用されます。
  • 短所: 背景に適しています。タグ<img>付けが難しい

Javascript ソリューションはwindow.devicePixelRatioプロパティに関するものです。

  • 利点: Javascript で画像ソースを操作できます。したがって、背景ではなく直接画像を提供する場合は、Javascript を使用することをお勧めします
  • すべてのブラウザーに適用できるわけではありませんが、現在のサポートで十分です。リストについては、以下を参照してください。
  • もう少し設定が必要です。

CSS ソリューション

通常の画像の場合は、アイコンを言います

.sample-icon {
    background-image: url("../images/sample-icon.png");
    background-size: 36px 36px;
}

Retina の場合は、以下を追加します

@media only screen and (-webkit-min-device-pixel-ratio: 2), /* Webkit */
    (min-resolution: 192dpi) /* Everyone else */ {
    .sample-icon {
        background-image: url("../images/sample-icon-highres.png");
        background-size: 18px 18px;
}

数字を覚えたくない人のために、min-resolution: 2dppxを置き換えるために使用できますmin-resolution: 192dpi

違いに注意してください。

  1. 2 つの異なるアイコン、1 つはノーマル、もう 1 つは高解像度。ハイレゾアイコンは通常の2倍の大きさです。
  2. 背景サイズ。後半は半分。ただし、実際の使用でテストする必要があります。

リソース: + http://www.w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio/ + http://view.jquerymobile.com/master/demos/widgets/ボタン/#CustomIcons

Javascript ソリューション

プロパティを使用window.devicePixelRatioして解像度を検出します。

if (window.devicePixelRatio >= 2) {
  alert("This is a Retina screen");
  //Do something to manipulate image url attribute
  //for example add `@2x-` before all image urls
}
ブラウザのサポート

Safari、Android WebKit、Chrome 22+ および Android、Opera Mobile、BlackBerry WebKit、QQ、Palm WebKit、参照: http://www.quirksmode.org/blog/archives/2012/06/devicepixelrati.html

アンドロイド用

Android デバイスは、Retina の 2 ではなく 1.5 を高解像度として使用します。 http://developer.android.com/guide/webapps/targeting.html --#Targeting Device Density with CSS, #Targeting Device Density with JavaScript

さらに良い読書

http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html 「私は、特別な Retina 画像を提供することはあまり好きではありません。なぜなら、特にモバイル接続ではウェブが重くなりすぎるからです。それにもかかわらず、人々はやります。」-- ピーター・ポール・コッホ

更新 2013-04-18 jQuery モバイル リンクを更新

于 2012-11-17T13:32:28.200 に答える
1

私はこれを見つけました：

var retina = window.devicePixelRatio > 1;

これにより、網膜がtrueに戻るはずです。これは、if関数を使用して適切な画像を提供できます。

ソース： http： //briancray.com/posts/detect-retina-displays-with-javascript

-InfiniDaZa

于 2012-11-17T13:06:06.517 に答える
0

ネットワーク機能、レスポンシブ イメージ、およびリソースの読み込みに注意する必要があります。

これまでのところ、javascript ソリューションは静かではありません。通常、イメージ スワップの前に両方のリソース (イメージ) をダウンロードする必要があるためです。

次のような完全なソリューションを使用しない限り、バックグラウンドの css メディア クエリを使用することをお勧めし ます。

于 2015-07-23T08:44:55.630 に答える