4

screen.availWidthと だけを使用して Retina iPad (および同様のデバイス) を検出する際に問題が発生していますwindow.devicePixelRatio。問題は、iPhone と iPad ではディップ数が表示されるのscreen.availWidthに対し、Android デバイスでは物理ピクセル数が報告されるように見えるため、画面がタブレット サイズであるかどうかを確実screen.availWidth / window.devicePixelRatioに計算できないことです。

私を助けるために使用できる他のDOMプロパティはありますか?

編集- 質問が重複していないことをうまくいけば明らかにする方法で要約する

screen.availWidthを考慮してすでに調整された値を報告するかどうかを確認するにはどうすればよいですかwindow.devicePixelRatio

4

3 に答える 3

4

それは役立つはずです

var retina = (window.retina || window.devicePixelRatio > 1);

アップデート

Retina.isRetina = function(){
    var mediaQuery = "(-webkit-min-device-pixel-ratio: 1.5),\
                      (min--moz-device-pixel-ratio: 1.5),\
                      (-o-min-device-pixel-ratio: 3/2),\
                      (min-resolution: 1.5dppx)";

    if (root.devicePixelRatio > 1)
      return true;

    if (root.matchMedia && root.matchMedia(mediaQuery).matches)
      return true;

    return false;
};
于 2013-03-11T09:55:00.770 に答える
1

私はこれをテストしていませんが、うまくいくと思われるアプローチを次に示します。時間があるときに jsbin を作成します。

すべてのデバイス (私の知る限り) は、値を CSS メディア クエリに渡す前に devicePixelRatio を調整するため、(わずかに疑似コードで) 調整することができます。

  1. 測定window.devicePixelRatioし、screen.availWidth

  2. 次のようなメディア クエリを含むスタイル タグを head に書き込みます。 

    #my-test-el {
  display: none;
  visibility: visible;
}

@media screen and (min-device-width:screen.availWidth) {
  #my-test-el {
 visibility: hidden;
  }
}

  3. <div id="my-test-el">ページに追加

  4. 属性を読み取りstyle.visibilityます。hidden に等しい場合、css 値は screen.availWidth と同じ値です => screen.availWidth は dpr 用に事前調整されています。

編集うまくいきます！http://jsbin.com/IzEYuCI/3/edit . 私もmodernizrプラグインをまとめます

editそして、Modernizr で取得するためのプル リクエストは次のとおりです - https://github.com/Modernizr/Modernizr/pull/1139。役に立つと思う場合は、賛成票を投じてください

于 2013-12-04T09:52:08.180 に答える
0

このModernizrプラグインが役立つ場合があります: Modernizr Retina : HiDPI テスト

注: Modernizr のメディア クエリ機能が必要です

于 2013-03-11T09:57:58.420 に答える