媒体查询不按预期在Android

问题描述

我有4个媒体查询。第1，第3和第4的工作，但二日一似乎没有激活。

I have 4 media queries. The 1st, 3rd and 4th work, but the 2nd one doesn't seem to activate.

为什么480x720（第二个媒体查询），默认为第一媒体查询？

Why is the 480x720 (second media query) defaulting to the first media query?

@media screen and (max-width: 320px) and (orientation: portrait) { body{background:#F0F;} }
@media screen and (min-width: 321px) and (max-width: 480px) and (orientation: portrait) { body{background:#F00;} }
@media screen and (max-width: 480px) and (orientation: landscape) { body{background:#0F0;} }
@media screen and (min-width: 481px) and (max-width: 800px) and (orientation: landscape) { body{background:#FF0;} }

什么是预期的：

什么是真正发生的事情：

为什么480x720（第二个媒体查询），默认为第一媒体查询？

Why is the 480x720 (second media query) defaulting to the first media query?

推荐答案

我认为你需要做一个设备分辨率检测沿

I think you need to do a device resolution detection in your media query along the lines of

@media (-webkit-min-device-pixel-ratio: 1.5),  
       (-o-min-device-pixel-ratio: 3/2),  
       (min--moz-device-pixel-ratio: 1.5),  
       (min-device-pixel-ratio: 1.5) {  
       /* high resolution styles */  
}  

检查大卫·卡尔霍恩的移动最佳实践的优秀文章。

这篇关于媒体查询不按预期在Android的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！