1

我正在为我的网站使用媒体查询，它可以完美地从网络到移动设备。现在我想专门使用 Apples Retina MBP 的一些样式（不是 iPad、iPhone 等）。但是我无法让它工作，当我更改 CSS 时，它只会在所有设备上更改。

有谁知道仅针对他测试的 Macbook Pros 的防弹媒体查询？

4

3 回答 3

3

我使用这个媒体查询：

@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/

于 2013-04-03T19:01:36.853 回答
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

于 2012-12-06T15:58:18.027 回答
0

我会尝试

@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'

希望能帮助到你

于 2012-12-06T16:33:12.907 回答