Question

我正在努力尝试定位视网膜屏幕的媒体查询。我收到了这个媒体查询;

@media(-webkit-min-device-pixel-ration:2)and (min-resolution:192dpi) {}

在Chrome Canary Devtools中，它确实得到了风格，但在实际的视网膜显示屏上测试它（在这种情况下是iphone 5s）却没有。

我也使用这个视口，因此它会扩展所有内容，我试图删除它，但它在上面的问题中没有任何区别。

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=0.5 maximum-scale=0.5, user-scalable=no target-densitydpi=device-dpi">

关于我为什么遇到这个问题的任何想法？

Answer 1

尝试此媒体查询，它可以正常工作

@media  
only screen and (-webkit-min-device-pixel-ratio: 2),  
only screen and ( min--moz-device-pixel-ratio: 2),  
only screen and ( -o-min-device-pixel-ratio: 2/1),  
only screen and ( min-device-pixel-ratio: 2),  
only screen and ( min-resolution: 192dpi),  
only screen and ( min-resolution: 2dppx){
   //your css goes here..
}

同时更改视口

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

为什么这个媒体查询不会影响视网膜？

1 个答案: