90

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

私は標準の 24 インチ 1920x1080 モニターで Windows を実行しています。非常に鮮明でシャープなため、直接比較するとロゴがさらに悪くなります.

このチュートリアルに従って、Web サイトを Retina 対応にしました。

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

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

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

4

9 に答える 9

153

Firefox での about:config ハック

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

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

スクリーンショット: (出典: staticflickr.com )


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

これは、Windows 7 で Firefox 21.0 を使用し、Mac OS X で Firefox 27.0.1 を使用しても問題なく動作します。

メディア クエリやその他のより高度なロジックを使用していない場合 (つまり、全員に HiDPI 画像を提供している場合)、ブラウザで 200% にズームインできます。Chrome エミュレーションは便利なツールであり、メディア クエリを起動しますが、ズームを防止するため、画質を調べることはできません。

Firefox と Edge の拡大

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

于 2013-06-21T05:17:11.317 に答える
25

Google Chrome バージョン「33.0.1720.0 Canary」では、iPhone5 などのデバイスを「デバイス ピクセル比」、「Android フォント メトリック」、「ビューポート エミュレーション」などの優れたパラメーター セットでエミュレートできるようになりました。

その Firefox のハックはもう必要ありません。

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

于 2013-11-27T10:48:09.610 に答える
14

クロムでは、次の方法で実行できます。

1) Chrome デベロッパー ツールを開き、小さな「歯車」アイコンをクリックします。 ここに画像の説明を入力

2) 次に、[コンソール ドロワーに「エミュレーション」ビューを表示する] を選択します。 ここに画像の説明を入力

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

ここに画像の説明を入力

于 2014-04-22T23:04:59.760 に答える
10

私の知る限り、網膜デバイスを購入する以外に不可能です。

いくつかの回避策

関連性が低い

于 2013-03-21T16:59:34.743 に答える
7

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

1) Web ページで「右クリック」し、「検査」を選択して Chrome の開発者ツールを開きます。

2) [デバイス モードの切り替え] アイコンをクリックします。

[デバイス モードの切り替え] アイコンをクリックします。

3)画面上部の [デバイス] ドロップダウン ボックスで、[ HiDPI スクリーンを搭載したノートパソコン] を選択します。

HiDPIスクリーンを搭載したラップトップを選択

4) Retina 別名 HiDPI 画面で Web サイトがどのように表示されるかを確認できるようになりました

于 2016-03-10T11:06:17.697 に答える
-1

これが単純すぎるかどうかはわかりません。Ctrl キーを押しながらスクロールすると、メディア クエリがトリガーされます。Bugzilla で確認しましたが、動作します。ぼやけて見えるのでsvgスケーリングについてはわかりませんが、それはsvg画像です。

于 2014-09-24T17:33:24.460 に答える