为什么这个媒体查询不击中视网膜?
-
02-01-2020 - |
题
我正在努力尝试瞄准视网膜屏幕的媒体查询。 我收到了这个媒体查询;
@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">
.
对我为什么有这个问题的任何想法?
解决方案
尝试此媒体查询,它有效
@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">
. 不隶属于 StackOverflow