44

Google Chrome でさまざまな画面解像度をテストするのは簡単ですが、次の CSS メディア クエリの基礎となるさまざまなデバイス ピクセル比を開発者がどのようにテストできるのだろうかと思います。

/* Pixel ratio of 1. Background size is 100% (of a 100px image) */
#header { background: url(header.png); }

/* Pixel ratio of 1.5. Background-size is 1/1.5 = 66.67% (of a 150px image) */
@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
    #header { background: url(headerRatio1_5.png); background-size: 66.67%; }

}

/* Pixel ratio of 2. Background-size is 1/2 = 50% (of a 200px image) */
@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
    #header { background: url(headerRatio2.png); background-size: 50%; }

}

デバイスのピクセル比を模倣する方法やブラウザ拡張機能はありますか?

4

5 に答える 5

49

Firefox での about:config ハック

あなたは実際にFirefoxを使用することができます：

  1. 「about:config」に移動します
  2. 「layout.css.devPixelsPerPx」を見つけます
  3. 希望の比率に変更します (通常の場合は 1、網膜の場合は 2 など)。

ページを更新してください。メディア クエリが有効になりました。Web 開発に最適な Firefox に敬意を表します。

これは、Windows 7 と Firefox 21.0 で行われました。

Firefox と Edge の拡大

現在、Firefox と Edge では、ズームすると dppx ベースのメディア クエリがトリガーされます。したがって、この簡単な方法で十分かもしれませんが、この機能はFirefox では「修正されない」バグとして報告されているため、変更される可能性があることに注意してください。

于 2013-06-21T05:07:02.380 に答える
33

Chrome DevTools には、Chrome 32 以降で利用できる「デバイス モードとモバイル エミュレーション」という機能があります。ここに 詳細 が 記載 さ れ てい る. これは、Google の DevBytes YouTube チャンネルのビデオチュートリアルです。

F12 (または Mac ではShift+Ctrl+I / Cmd+Opt+I )を押して、DevTools を開きます。現在の Chrome バージョンでは、DevTools ウィンドウの左上隅にある[スマートフォン] アイコンをクリックして、モバイル エミュレーションを有効にします。エミュレーション画面のツールバーで、ほとんどの設定 (デバイスの種類、画面の解像度と回転、ズーム率など) を変更できます。その他のオプションについては、ツールバーの右側にある[ ... ] をクリックしてください。

ここに画像の説明を入力 ここに画像の説明を入力

古いバージョンの Chrome では、この機能を使用する前に有効にする必要がある場合があります。DevTools で [設定]アイコン (歯車) をクリックし、[オーバーライド] をクリックして、[コンソール ドロワーに「エミュレーション」ビューを表示する]を選択します。次に、設定アイコンの左側にある">="アイコンをクリックして「コンソール ドロワー」を表示すると、 「エミュレーション」タブが表示され、エミュレーションを有効にして設定を変更できます。

于 2014-01-21T16:43:02.680 に答える
4

ピクセル比のメディア クエリがトリガーされないという点で、Volker E. は正しいです。

ただし、少なくとも1.5​​x、2x などのデバイスのメディア クエリの外観(読み取り: スケーリング) をプレビューすることは可能です。

Chrome Dev Tools で目的の解像度を指定し、[ウィンドウに合わせる] が選択されていることを確認してください。次に、ブラウザ ウィンドウのサイズを適切に変更します。

ここに画像の説明を入力

例: Galaxy Nexus をランドスケープ モードでエミュレートするには、寸法として 720x1280 を入力し、ブラウザ ウィンドウのサイズを 640px 幅に変更します。出来上がり！これで、デバイスの 2 倍のピクセル比がエミュレートされました。

(デバイスの幅 [ピクセル]) ÷ (デバイスのピクセル比) = ウィンドウのサイズ

于 2013-06-17T21:17:40.020 に答える
-4

特定のデバイスのデバイス ピクセル比に対応するメディア クエリをテストすることができます。テスト中にブラウザを見ています。
デバイスのピクセル比は、デバイスで使用可能な物理ピクセルを考慮に入れるため、デバイス固有の変更不可能な数値です。devicePixelRatio に関する ppk の調査を参照してください。

したがって、基本的に、デバイス自体のピクセル比とは異なるデバイスのピクセル比を模倣することはできません。それでも、別のメディア クエリ ルールを適用するだけで、コードのスモーク テストを行うことができます。

min-device-pixel-ratio: 1.5Nexus 7 などの新しい HDPi デバイスのデバイス ピクセル比は 1.3であるため、注意してください。

于 2013-05-05T09:12:23.173 に答える