[解決済み] WindowsでRetina対応のウェブサイトをテストするには、実際にRetinaディスプレイがない場合はどうすればよいですか？

質問

Retina のような HiDPI ディスプレイ用のウェブサイトをテストするために、Windows で Retina ディスプレイをシミュレートする方法はありますか?

私は、標準の 24" 1920x1080 のモニター上で Windows を実行しています。昨夜、友人の真新しい 15 インチ Retina MacBook Pro で私の Web サイトをチェックアウトしたところ、グラフィックはすべてぼやけて見え (通常の 15 インチ MacBook よりはるかに悪い)、フォントは超鮮明でシャープだったため、直接比較してロゴがさらに悪く表示されることになりました。

私はこのチュートリアルに従って、自分のウェブサイトを Retina 対応にしました。

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

背景画像がないので、retina.jsの手法を使いました。

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

どのように解決するのか？

Firefoxのabout:configハック

実際にFirefoxでできます。

1. about:config" に移動します。
2. レイアウト.css.devPixelsPerPxを検索します。
3. 希望の比率に変更する(1なら通常、2ならRetinaなど。-1がDefaultのようです。)

スクリーンショットです。





_{(ソース staticflickr.com )}

ページを更新すると、メディアクエリが実行されました。 Firefox の Web 開発における素晴らしさに脱帽です! 注意: Web サイトが 2 倍のサイズに拡大されるだけでなく、Firefox の UI も 2 倍になります。この倍増またはズームは、標準的なピクセル比の画面上のすべてのピクセルを調べることができる唯一の方法であるため、必要なことです。

これは、Firefox 21.0 を搭載した Windows 7 と、Firefox 27.0.1 を搭載した Mac OS X で問題なく動作します。

メディア クエリやその他の高度なロジックを使用していない場合 (つまり、HiDPI 画像をみんなに与えている場合)、ブラウザで 200% に拡大するだけでよいのです。Chrome エミュレーションもメディア クエリをキックするので便利なツールですが、ズームができないので、画質を調べることはできません。

Firefox および Edge でのズーム機能