74

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

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

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

前もって感謝します。

4

6 に答える 6

115

Firefox での about:config ハック

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

  1. に行くabout:config
  2. 探すlayout.css.devPixelsPerPx
  3. 希望の比率に変更します (通常の場合は 1、網膜の場合は 2 など)。

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


ページを更新してください。メディア クエリが有効になりました。Web 開発に最適な Firefox に敬意を表します。

これは、Windows 7 と Firefox 21.0 で行われました。

このソリューションの利点は、メディア クエリやその他の高度なロジックをトリガーできることです。それを行っておらず、全員に HiDPI 画像を提供しているだけの場合は、Chrome などでズームインできます (または、ボートが浮かんでいる場合は、ズームする CSS を記述します)。

Firefox と Edge のズーム

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

于 2013-06-21T05:18:13.710 に答える
20

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

  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

于 2014-09-02T03:22:53.730 に答える
4

GitHubにはJavaScriptWebRetinaエミュレーターがあります。

OperaMobileEmulatorを使用してカスタム解像度をテストすることもできます。ここにそれを行う方法の説明があります。

古いAppleコンピューター（Retinaディスプレイなし）を使用している場合は、XCode内のツールであるQuartzDebugを使用してRetinaディスプレイをシミュレートできます。また、XCodeでは、iOSシミュレーターを使用して、Retinaディスプレイを搭載したiOSデバイスをテストできます。

于 2012-12-23T00:51:10.607 に答える
4

この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) を適用するとぼやけて見えるので、zoom: 200%; を使用する必要があります。

于 2013-05-15T16:34:01.380 に答える
0 
body {
  zoom: 200%;
  -moz-transform: scale(2);
  -moz-transform-origin: 0 0;
}

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

于 2013-06-12T08:49:05.523 に答える