実際のRetinaディスプレイを使用せずにWindowsでRetinaのWebサイトをテストするにはどうすればよいですか？

85

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

私はWindowsを標準の24 "1920x1080モニターで実行しています。昨夜友人の真新しい15" Retina MacBook Proで自分のウェブサイトをチェックしたところ、フォントは非常にくっきりとシャープで、直接比較することでロゴの見栄えがさらに悪くなります。

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

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

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

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

html  css  retina-display  retina.js 
— アレクサンダーレヒシュタイナー
ソース
2
役に立つかもしれません：stackoverflow.com/questions/12243549/...
— JSuar
@Jsuar：残念ながらそうではありません。JavaScriptライブラリはretina.jsで動作しないようで、Operaはモバイル用のようです。
— Alexander Rechsteiner 2013年
2
ロゴなどのすべての画像を、pngやjpgではなくSVGで作成してみてください。
— Seph 2013年

回答:

152

Firefoxでのabout：configハック

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

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

スクリーンショット：

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

これは、Firefox21.0を搭載したWindows7、およびFirefox27.0.1を搭載したMacOSXでも正常に機能します。

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

FirefoxとEdgeのズーム

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

— アンドリューブ
ソース
2
Chromeに似たものはありますか？
— Krzysztof Romanowski 2013
@castusそうは思わないでください。あなたが得た最善の方法はズームインすることであり、それがメディアクエリに影響を与えるとは思いません。
— andrewb 2013
@andrewb：それが私の評判を高めたのと同じことを考えていました（イェーイ！）。多分それは頻繁な検索用語のためにグーグルで索引付けされました。
— Alexander Rechsteiner 2013
@AlexanderRechsteinerそれは実際にSmashingMagazineのFacebookページによってリンクされ、かなりの数の人々によってFacebookの周りで共有されました。私の答えを受け入れてくれてありがとう！
— andrewb 2013
@ChristinaArasmoBeymerはい、できます
— andrewb 2013年
25

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

Firefoxをハッキングする必要はもうありません-とにかく、操作するのは難しいです。

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

— アーブギムタム
ソース
1
MediaQueriesは調べていませんが、画質を確認するだけでは、これがどのように役立つかわかりません。ピクセルX2をブーストする必要があります。そうしないと、Retina対応のコンテンツとそうでないコンテンツを視覚的に確認できません。簡単なテストを行ったところ、Chromeでgoogle.comのウェブサイトが小さく見えましたが、Firefoxにアクセスすると、当時のGoogleDoodleはRetinaのピクセル密度ではないことがわかりました。しかしねえ、これが人々のために働くなら、それはFirefox構成でクレイジーな大きなUIをスキップすることを意味します！
— andrewb 2014
ええ、ここでのポイントは画質を上げることではありません（物理的な画面は同じピクセル密度のままなので不可能です）が、Retina Macを持たない開発者として、すべてのベースをカバーしていることを確認してください。
— Urb Gim Tam
画質を確認したいだけなら、ブラウザを200％ズームする以外に何もする必要はありません。Chromeでメディアクエリを実行する場合は、ズームとエミュレートの両方を実行する必要があります。
— Michael McGinnis
@MichaelMcGinnis Chromeでエミュレートしてズームすることができませんが、できましたか？
— andrewb 2014年
ええ@andrewb、それは別々のテストである必要があるようです。ズームしてからエミュレートすると、画像が再び小さくなります。エミュレート中にズームしても、画像サイズには影響しません。
— Michael McGinnis 2014年
14

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

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

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

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

ここに画像の説明を入力してください

— thegreyspot
ソース
ありがとう。現在のChromeでも多少似ています。である2.5ため、単一のマジックナンバーすべてのRetinaディスプレイには？それとも2014年以降増加/減少しましたか？編集：ああ、それはここにあります
— 無愛想な
10

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

いくつかの回避策

関連性が低い

— JSuar
ソース
おかげで、developer.apple.comからの箇条書きは私を正しい軌道に乗せました。やったここで、この他の答えをスタックオーバーフローに。
— アレックスケンドリック2013
7

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

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

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

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

3）画面上部の[デバイス]ドロップダウンボックスで、「選択HiDPI画面でノートPCを」

HiDPI画面を備えたラップトップを選択

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

— user280109
ソース
1

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

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

— Simon_Weaver
ソース
1

GoogleChromeバージョン80

  1. 開発ツールを開く ctrl-shift j
  2. 左上のタブレット/電話アイコンをクリックしてデバイスツールバーを切り替えます（クリックすると青色に変わります）

ここに画像の説明を入力してください

  1. これで、ビューポートの上にツールバーが表示されます。右上のオプションアイコン（3ドット）をクリックし、[デバイスのピクセル比を追加]オプションを選択します。

ここに画像の説明を入力してください

  1. ツールバーにオプションが表示されます。ここから、1x、2x、または3xに切り替えることができます。

ここに画像の説明を入力してください

  1. テストするときは、ピクセル比を変更するたびに更新ボタンを押すようにしてください。比率を2xに設定してからそれを低く設定すると、ブラウザはすでに2x以上をフェッチしている場合、ブラウザは1xアセットをフェッチしないため、変更は表示されません。
— アイザックパック
ソース
-1

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

— デール・ウェミス
ソース
どのブラウザまたはハードウェアを使用していますか？BugzillaではなくMozillaのことですか？
— Michael McGinnis
-3

Mac（またはMac osx仮想マシン）を使用している場合は、xcodeでiosエミュレーターを使用できます。ウィンドウが2倍大きくなるため、実際の外観とは異なりますが、画像がぼやけているかどうかがはっきりとわかります。

— フィルタ
ソース
ええ、そしてあなたはウィンドウズでVMとしてos xを実行することができます
— filtah 2014
@filtahは本当に最悪の提案ではありません
— Paul
— Michael McGinnis
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.