web-dev-qa-db-ja.com

実際のRetinaディスプレイなしでWindowsでRetinaのWebサイトをテストする方法

WindowsでRetinaディスプレイをシミュレートして、RetinaなどのHiDPIディスプレイのWebサイトをテストする方法はありますか？

Windowsを標準の24インチ1920x1080モニターで実行します。昨夜、友人の真新しい15インチRetina MacBook ProでWebサイトをチェックアウトしましたが、フォントはすべてぼやけていました（通常の15インチMacBook非常に鮮明でシャープ、直接比較のためにロゴがさらに悪く見えます。

私はこのチュートリアルに従って、RetinaのWebサイトを準備しました。

http://line25.com/tutorials/how-to-create-retina-graphics-for-your-web-designs

背景画像がないため、retina.jsアプローチを使用しました。

これが実際に機能するかどうかをテストする方法はありますか？明らかに、友人にRetina Notebookの使用を依頼することもできますが、それは私にとって実行可能なワークフローではありません。自分の環境でRetinaとの互換性をWebサイトで少なくとも大まかにテストできるようにしたいと思います。

htmlcssretina-displayretina.js
78
Alexander Rechsteiner

about：configのFirefoxでのハック

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

  1. 「about：config」に移動します
  2. 「layout.css.devPixelsPerPx」を見つけます
  3. 希望の比率に変更します（通常の場合は1、網膜の場合は2など。-1がデフォルトのようです）。

スクリーンショット：

ページを更新-ブーム、メディアクエリが有効になりました！ Web開発に最適なFirefoxをお勧めします！気をつけてください。ウェブサイトのサイズが2倍になっただけでなく、Firefox UIも2倍になりました。標準のピクセル比の画面ですべてのピクセルを調べることができる唯一の方法であるため、この倍増またはズームが必要です。

これは、Firefox 21.0を搭載したWindows 7、およびFirefox 27.0.1を搭載したMac OS Xで正常に機能します。

メディアクエリやその他の高度なロジックを使用していない場合（つまり、すべての人にHiDPI画像をフィードしている場合）、ブラウザで200％にズームインすることができます。 Chromeエミュレーションはメディアクエリを開始するのと同様に有用なツールですが、ズームを防ぐため、画質を調べることはできません。

FirefoxとEdgeでズームする

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

149
andrewb

GoogleでChromeバージョン "33.0.1720.0 Canary"、今すぐ 「デバイスピクセル比」、「Androidフォントメトリックス「および「ビューポートエミュレーション」 。

Firefoxをハックする必要はもうありません-とにかく扱いにくいです。

Google開発チームに感謝します。 ！:)

24
Urb Gim Tam

chromeでは次の方法で実行できます。

1）Chrome Developer Toolsを開き、小さな「ギア」アイコンをクリックします。 enter image description here

2）次に、「コンソールドロワーに「エミュレーション」ビューを表示する」を選択します。 enter image description here

3）最後に、開発者ツールで「コンソールドロワー」を開き、エミュレーションを選択します。 画面のエミュレートを設定し、デバイスのピクセル比を2.5に設定します。

enter image description here

14
thegreyspot

私が知る限り、それはRetinaデバイスを購入する以外には不可能です。

いくつかの回避策

関連性が低い

10
JSuar

Google ChromeでRetina（HiDPI）ディスプレイをエミュレートする現在の方法

1）「ウェブページで右クリック」、次に「Inspect "でChromeのデベロッパーツールを開きます

2）「デバイスモードの切り替え」アイコンをクリックします

Click the Toggle Device Mode Icon

3）画面上部のデバイスドロップダウンボックスで、「Laptop with HiDPI Screen」

Select Laptop with HiDPI Screen

4）Retina aka HiDPI画面でウェブサイトがどのように見えるかを見ることができます

7
user280109

画像サイズ変更ライブラリを使用して、画像を動的に作成します。 2xバージョンでは、デバッグ中に動的な透かしを追加します。これにより、高解像度画像が実際に表示されているかどうかを非常に簡単に確認できます。とても助かった。

これが機能する方法は異なるため、サンプルコードは含まれません。

1
Simon_Weaver