Question

新的响应式设计，我正在努力解决问题。

Galaxy Note 2的像素尺寸为1280 x 720，我指定了以下CSS：

@media (min-width:769px){
     #mobile{
         display:none;
     }
     #tablet{
         display:none;
     }
     #desktop{
         width:100px;
         float:left;
         background-color:green;
     }
 }
 @media (min-width:321px) and (max-width:768px){
     #desktop{
         display:none;
     }
     #tablet{
         width:100px;
         float:left;
         background-color:black;
         color:white;
     }
     #mobile{
         display:none;
     }
 }

 @media (max-width:320px){
     #desktop{
         display:none;
     }
     #mobile{
         width:100px;
         float:left;
         background-color:blue;
         color:white;
     }
     #tablet{
         display:none;
     }
 }

手机（正如预期的那样）显示了该网站的移动“版本”，但我不明白为什么它具有前面提到的尺寸时属于＆lt; 321px类别了！

以下代码执行此操作？

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

希望对此有所帮助！谢谢:)）

Answer 1

这是因为css使用“设备无关像素”，它与设备像素不同。您还可以使用像素比率的媒体查询来选择具有更高像素密度的设备。

A List Apart: A Pixel Identity Crisis

此外，请注意实际分辨率不低。浏览器只是使用不同的度量单位。

Answer 2

某些移动设备上的浏览器使用较低的分辨率来加速渲染器。您可以使用JS来检查浏览器使用的宽度和高度。

alert('Window: '+$(document).width()+'x'+$(document).height());

小提琴：http://jsfiddle.net/fGVAg/

响应式设计像素宽度的清晰度

2 个答案: