我正在为我的网站使用媒体查询,它可以完美地从网络到移动设备。现在我想专门使用 Apples Retina MBP 的一些样式(不是 iPad、iPhone 等)。但是我无法让它工作,当我更改 CSS 时,它只会在所有设备上更改。
有谁知道仅针对他测试的 Macbook Pros 的防弹媒体查询?
我正在为我的网站使用媒体查询,它可以完美地从网络到移动设备。现在我想专门使用 Apples Retina MBP 的一些样式(不是 iPad、iPhone 等)。但是我无法让它工作,当我更改 CSS 时,它只会在所有设备上更改。
有谁知道仅针对他测试的 Macbook Pros 的防弹媒体查询?
我使用这个媒体查询:
@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/
媒体查询不检测用户代理/设备;他们检测特征(例如分辨率和方向)。尝试使用 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
我会尝试
@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'
希望能帮助到你