web-dev-qa-db-ja.com

Google ChromeまたはWindows上のFirefoxでメディアクエリをテストするためにピクセル比をシミュレートする方法は？

Googleでさまざまな画面解像度をテストするのは簡単ですが、Chrome=.

/* 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%; }

}

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

csstestingmedia-queries
38
Stephan Ahlf

about：configのFirefoxでのハック

実際にFirefoxを使用できます：

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

ページを更新-ブーム、メディアクエリが有効になりました！ Web開発に最適なFirefoxをお勧めします！

これは、Firefox 21.0を搭載したWindows 7で行われました。

FirefoxとEdgeでズームする

現在FirefoxおよびEdgeでは、ズームするとdppxベースのメディアクエリがトリガーされます。したがって、この簡単なアプローチで十分かもしれませんが、Firefoxの機能は「修正されない」として報告されることに注意してください bug .

46
andrewb

Chrome DevToolsには、Chrome 32以降で利用可能な「デバイスモードとモバイルエミュレーション」という機能があります。詳細に説明します こちら 。これは ビデオチュートリアル GoogleのDevBytes YouTubeチャンネルです。

F12（またはShift + Ctrl + I/Cmd + Opt + IMac）を押してDevToolsを開きます。現在のChromeバージョンで、DevToolsウィンドウの左上隅にある "smartphone"アイコンをクリックしてモバイルを有効にします。エミュレーション。エミュレーション画面のツールバーで、ほとんどの設定（デバイスの種類、解像度、ピクセル比、ユーザーエージェント...）を変更できます。詳細オプションについては、をクリックしてください... 「ツールバーの右側にあります。

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

19
rob74

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

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

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

enter image description here

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

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

4
derrylwc

derrylwcには良い提案がありますが、指示は含まれていません。

  • 開発者ツールを開きます（ctrl-shift-iまたはcommand-alt-i）
  • 設定のために右下の歯車をクリックします
  • [オーバーライド]タブ（左側）を選択します
  • [有効にする]と[DevToolsの起動時に有効にする]をクリックします
  • 「デバイスメトリック」を確認してカスタマイズします。 「フォントスケール係数」は、デバイスのピクセル比のようです。
1
Garry Boyer