媒體查詢：僅限目標視網膜macbook專業版

Question

我爲我的網站使用媒體查詢，它可以完美地從網絡到移動設備。 現在我想單獨使用一些款式蘋果Retina MBP的（不是iPad，iPhone等）。 但我不能讓它工作，當我改變CSS時，它只在所有設備上改變。

有誰知道只有他測試的Macbook Pros的防彈媒體查詢？

Answer 1

媒體查詢不檢測用戶代理/設備;他們檢測到的功能（如分辨率爲&的方向）。嘗試使用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 2

我會嘗試用

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

由於它是蘋果的Retina MBP的我不認爲很多設備可以兼得條件，你也可以鎖定它加入

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

希望它有助於

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