媒体查询在Android上的行为不如预期

问题描述

我有4个媒体查询。

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

  @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 -width：480px）and（orientation：landscape）{body {background：＃0F0;}} 
 @media屏幕和（最小宽度：481px） {body {background：＃FF0;}} 
  

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

解决方案

我认为您需要在媒体查询中进行设备分辨率检测， / p>

  @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）{
 / *高分辨率样式* / 
} 
  

检查。

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

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;} }

What is expected:

What is actually happening:

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 */  
}  

Check David Calhoun's excellent article on mobile best practices.

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