Question

我正在为我的网站使用媒体查询，它可以在从网络到移动设备上完美运行。现在我想使用苹果Retina MBP的一些款式（不是iPad，iPhone等）。但我无法让它工作，当我更改CSS时，它只会在所有设备上发生变化。

有没有人知道他测试过的Macbook Pros的防弹媒体查询？

Answer 1

我使用此媒体查询：

@media 
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-device-width: 1025px),
only screen and (   min--moz-device-pixel-ratio: 2) and (min-device-width: 1025px),
only screen and (   -o-min-device-pixel-ratio: 2/1) and (min-device-width: 1025px),
only screen and (        min-device-pixel-ratio: 2) and (min-device-width: 1025px),
only screen and (           min-resolution: 192dpi) and (min-device-width: 1025px),
only screen and (            min-resolution: 2dppx) and (min-device-width: 1025px) {

    /* MacBook-Retina-specific stuff here */
}

来源：http://css-tricks.com/snippets/css/retina-display-media-query/

Answer 2

媒体查询不会检测用户代理/设备;他们检测功能（例如分辨率和方向）。尝试使用javascript并将一个类应用于正文，并从那里应用样式。

var retina = (window.retina || window.devicePixelRatio > 1);
if (retina) {
    $('body').addClass('retina'); // for example
}

然后在你的CSS中

body.retina {
    // styles
}

body.retina #element {
    // styles
}

来源：http://hjzhao.blogspot.co.uk/2012/07/detect-retina-display-using-javascript.html

Answer 3

我会尝试

@media screen and (min-height: (yourtargetdevicepixelsheight)px) and (min-width: (yourtargetdevicepixelswidth)px) {
     you styles here
}

因为它是Apples Retina MBP，我不认为很多设备可以兼具这两种条件，你也可以锁定它添加

and (max-height: (yourtargetdevicepixelsheight+1)px ) and the same with 'width'

希望有所帮助

媒体查询：仅限目标视网膜macbook pro

3 个答案: