2

通常のブラウザーでいくつかの網膜画像 css をテストする方法を知りたいですか? 以下のコードではなく、以前のコードも試してみましたが、機能しているかどうか疑問に思いましたか?

これは同じ画像がより良い品質であるため、正しい画像がロードされているかどうかを判断するのは困難です。

//retina stuff
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
    #home {
          background: url('bg-home-x2.png') no-repeat;
}

.shelf {
    background: url('shelf-x2.png') no-repeat top center;
    height: 111px;
    padding-bottom: 0px;
}

#pantry {
    background: url('bg-pantry-x2.png') no-repeat;
    width: 320px;
    height: 480px;
    z-index: -1;
}

#list {
    background: url('bg-cart-x2.png') no-repeat;
    width: 320px;
    height: 480px;
    z-index: -1;
    margin-top: -6px;
}
}
4

3 に答える 3

10

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

  1. 「about:config」に移動します
  2. 「layout.css.devPixelsPerPx」を見つけます
  3. 希望の比率に変更します (通常の場合は 1、網膜の場合は 2 など)。

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

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

于 2013-06-21T05:08:21.153 に答える
1

-min-device-pixel-ratioほとんどのコンピューター/PC には、テストに必要なピクセル比の値がないため (最新のハイエンドのラップトップ/ディスプレイを除く)を使用して、Web ブラウザーでデフォルトでこれを行うことはできません。

最適な方法は、対象のデバイスまたはデバイス ファミリを使用することですが、それらがない場合、エミュレーションを通じてメディア クエリをテストすることが唯一の方法であるため、次のいずれかが役立つ可能性があります。

  1. Opera モバイル エミュレーターの使用。これにより、一般的なデバイスに対してさまざまなテスト環境をセットアップできます。また、解像度とピクセル密度のカスタム セットアップを定義することもできます。

    ここに画像の説明を入力

    Windows、Mac、Linux で利用できます。

  2. Javascript ベースのWeb Retina Emulatorもありますが、これは CSS メディア クエリを解析しないため、単純に画像の有効性/整合性をチェックするためのものです。

  3. 特定の iOS デバイスをエミュレートする場合は、iOS シミュレーター(Xcode ツールの一部) を使用して Retina ディスプレイをテストできますが、これは適切ではないようで、ネイティブ アプリのテストに広く使用されています。

于 2013-05-11T12:22:08.020 に答える