1

响应式设计的新手，我正在尝试解决问题。

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

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

下面的代码是这样做的吗？

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

希望对此有所帮助！谢谢 ：）

4

2 回答 2

1

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

分开的清单：像素身份危机

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

于 2013-07-11T15:04:29.520 回答
0

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

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

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

于 2013-07-11T14:17:56.127 回答