3

クライアントがRetinaまたは他のHiDPIディスプレイを使用しているかどうかを検出し、それに基づいてbackground-imageさまざまなものに異なるものを表示するために、CSSを少し設定しました。divこれが私の構文です：

<!-- LoDPI and MedDPI displays -->
#div {
    opacity:0.4;
    position:absolute;
    top:0px;
    z-index:2;
    width:1600px;
    height:900px;
    animation-name:ring;
    animation-delay:0s;
    animation-duration:1500ms;
    animation-timing-function:cubic-bezier(0.225, 1.650, 0.000, 0.805);
    animation-fill-mode:forwards;
    background-image:url(/valid/path/to/regular/file);
}

<!-- For Retina and HiDPI displays -->
@media only screen and (min-device-pixel-ratio: 1.4) {
#div {
    background-image:url(/valid/link/to/HiDPI/file);
    background-position:center;
    background-size:contain;
    }
}

問題は、ピクセル比が1.5に設定されているRetina MBPでこれを試してみると（「1920x1200のように機能する」）、高解像度の画像ではなく通常の解像度の画像が表示されることです。

4

2 に答える 2

6

中かっこをすべて閉じているわけではありません。とにかく、サポートマトリックスを改善するには、メディアクエリを次のように置き換えます

@media only screen and (-moz-min-device-pixel-ratio: 1.5),
       only screen and (-o-min-device-pixel-ratio: 3/2),
       only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min-device-pixel-ratio: 1.5) {
         /*your rules*/
       }
于 2012-09-29T04:42:01.920 に答える
1

私は同じ問題を抱えていました：min-device-pixel-ratioはprefix-free jsでサポート（プレフィックス）されていないようです！？min-device-pixel-ratioはW3Cに準拠していません。

ベンダープレフィックスと一緒に使用すると、すべて正常に機能しますか？！

これは私にとってはうまくいきます（コメントを削除してください）

@media (-webkit-min-device-pixel-ratio: 2), /*  Firefox16, Chrome, Safari, iOS, Android */
       (min--moz-device-pixel-ratio: 2),    /*  Older Firefox browsers (prior to Firefox16) */
       (-o-min-device-pixel-ratio: 2/1),    /*  Opera */
       (min-device-pixel-ratio: 2),         /*  not defined yet, http://www.w3.org/TR/css3-mediaqueries/ */
       (min-resolution: 2dppx),             /*  not yet, probably in future, see http://www.w3.org/TR/css3-mediaqueries/ */
       (min-resolution: 192dpi)             /*  works for non css3 browser */
       {
            /* your styles go here */
       }
  • Operaの値は1/1、3 / 2、2 / 1で、1、1.5、2に相当します。
  • dpi値は、1、1.5、および2に相当する96、144、192である必要があります。

-webkit-text-size-adjust：noneを使用する場合; ポートレートモードからランドスケープモードに切り替えたときに、iPhoneでフォントサイズが爆発することはありません;-)

于 2012-10-05T19:08:57.897 に答える