Question

我被要求为平板电脑制作不同的响应式布局，具体取决于它们是否为高像素密度显示器。

此代码将以横向方式定位iPhone 5s，但似乎无法正常工作。有可能吗？

@media
only screen ( min-width: 568px) and (-webkit-min-device-pixel-ratio: 1.25),
only screen ( min-width: 568px) and ( min--moz-device-pixel-ratio: 1.25),
only screen ( min-width: 568px) and ( -o-min-device-pixel-ratio: 1.25/1),
only screen ( min-width: 568px) and ( min-device-pixel-ratio: 1.25),
only screen ( min-width: 568px) and ( min-resolution: 200dpi),
only screen ( min-width: 568px) and ( min-resolution: 1.25dppx)
{
    body {
        background-color: maroon;               
    }               
}

通过在查询中嵌入min-width来显示dpi，它似乎正在工作（我还没有在大型设备上测试过）。我从来没有听说过这样做，这样做是否安全？

@media
only screen and (-webkit-min-device-pixel-ratio: 1.25),
only screen and ( min--moz-device-pixel-ratio: 1.25),
only screen and ( -o-min-device-pixel-ratio: 1.25/1),
only screen and ( min-device-pixel-ratio: 1.25),
only screen and ( min-resolution: 200dpi),
only screen and ( min-resolution: 1.25dppx)
{
    @media only screen and ( min-width: 568px) {
        body {
            background-color: maroon;               
        }
    }       
}

Answer 1

and

后，您的媒体查询遗失only screen

@media only screen and  ( min-width: 568px)

http://jsfiddle.net/L2dhY/

检查我的mac book pro哪个在safari上有像素比率＆gt; 1.另请注意，在and

之后，您在第二个广告媒体查询中有only screen

结合最大宽度和最小设备像素比

1 个答案: