web-dev-qa-db-ja.com

Retinaディスプレイ用のWebページをテストするにはどうすればよいですか？

Retinaディスプレイ用のWebページをコーディングしました。現在、Retinaディスプレイモニターはありません。

RetinaディスプレイのWebページをテストするためのシミュレータアプリケーションまたはツールはありますか？

または、AppleのRetinaディスプレイに似たモニター（AppleのMacBookやiPadではない）はありますか？

前もって感謝します。

webpageretina-display
67
Sangam254

about：configのFirefoxでのハック

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

  1. about:configに移動します
  2. layout.css.devPixelsPerPxを検索
  3. 希望の比率に変更します（通常は1、網膜は2など）

スクリーンショット：

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

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

このソリューションの利点は、メディアクエリやその他の高度なロジックをトリガーすることです。それをしておらず、すべての人にHiDPI画像を供給している場合は、Chromeなどでズームインすることができます（または、それがあなたのボートを浮かせている場合は、CSSを書いてズームします） ）。

FirefoxとEdgeでズームする

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

106
andrewb

Chromeブラウザで網膜ディスプレイの動作をテストするかどうかを確認できます。このガイドを使用してください

  1. Chrome Browserとright clickを開き、inspect elementをクリックします
  2. 下部のバーには、console, search, emulation and renderingのタブがいくつかあります
  3. タブemulationをクリックし、次に示すようにバータブを引き上げます
  4. leftのメニューに従って調整し、デバイス、画面などを調整します。

詳細ガイドについては、この記事を確認してください： http://www.gee.web.id/2014/09/how-test-retina-display-on-chrome.html

20
Gee

GitHubにはJavaScript Web Retina Emulator があります。

Opera Mobile Emulatorを使用してカスタム解像度をテストすることもできます。 ここでの方法の説明 があります。

以前のAppleコンピューター（Retinaディスプレイなし）がある場合は、XCode内のツールであるQuartz Debugを使用してRetinaディスプレイをシミュレートできます。XCodeでは、 iOSシミュレーター。

4
Nelu

このcssを追加できます。すべてがサイズの2倍に見えますが、問題があれば簡単に見つけることができます。 Javascript Web Retina Emulatorが動作しませんでした（Safariのぼやけ）

body {
  zoom: 200%;
  -moz-transform: scale(2);
  -moz-transform-Origin: 0 0;
}

ズーム：200％がwebkitに適用されます。firefoxの場合は-mozなので、Safari/Chrome/Firefoxが機能しますが、IEについてはわかりません。

-webkit-transform：scale（2）を適用すると、物がぼやけて見えるため、ズームを使用する必要があります：200％;

4
placeboaddict
body {
  zoom: 200%;
  -moz-transform: scale(2);
  -moz-transform-Origin: 0 0;
}

そのコードだけでは、トリックを実行しません。メディアクエリを使用している場合、トリックを行うには、ピクセル比を1.5または2ではなく1に切り替える必要があります。そうしないと、画像がより高解像度の画像に切り替わりません。

0
Daniel Dogeanu