响应式设计混乱

Question

当我认为自己对媒体查询和响应式设计有所了解和组织时，我已经开始在某些设备中看到一些奇怪的行为，从而导致混乱。

我的意图是有一组媒体查询，我可以使用这些查询来覆盖所有不同的设备/分辨率。我已经看过一些带有例子的文章，并开始将它们付诸实践，但是在三星Galaxy SII移动设备上测试时，它们看起来并不像预期的那样工作。

开始宽度声称SII的分辨率为480x800。我不知道这个分辨率是否仅适用于视频播放，但是当我准备好我的设计时，它们似乎适合320px的宽度。

我使用JavaScript screen.width和screen.height性能检查什么解决它正在与这里是我的结果：

• 在本地浏览器我得到加载页面时，320x450分辨率纵向。然而，在同样的浏览器中，如果我以横向方向重新加载页面，我会获得533x235尺寸。就在这里，它是古怪的，因为我希望有相同的高度和宽度，无论使用的方向如何。此外，它们都不符合声称的480x800设备分辨率。

• 如果我使用Firefox浏览器，我会为横向和纵向取向获得480x800宽度的屏幕属性，但如果我尝试适合宽度为480像素的图像，则不会，因为它似乎只有320px的宽度。

实际上，在所有这些情况下，实际分辨率似乎是320x533。

任何人都有这种奇怪的行为的解释？

任何建议，以接近它，并获得媒体查询的设置，以涵盖所有的解决方案？

编辑::::::::::::::

我试图与视口：

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"> 

，仍然没有成功。实际上根据hexblot给出的链接中的文章“maximum-scale = 1”不应该缩放，但它确实在我的设备中（它可能只是针对iOS，不知道）。我有以下的CSS链接：

<link rel='stylesheet' type='text/css' media='only screen and (max-width : 320px)' href='".home_url()."/wp-content/themes/twentyeleven/style-xsmall.css'> 
<link rel='stylesheet' type='text/css' media='only screen and (min-width : 321px) and (max-width : 479px)' href='".home_url()."/wp-content/themes/twentyeleven/style-small.css'> 
<link rel='stylesheet' type='text/css' media='only screen and (min-width : 481px) and (max-width : 767px)' href='".home_url()."/wp-content/themes/twentyeleven/style-medium.css'> 
<link rel='stylesheet' type='text/css' media='only screen and (min-width : 768px) and (max-width : 959px)' href='".home_url()."/wp-content/themes/twentyeleven/style-large.css'> 
<link rel='stylesheet' type='text/css' media='only screen and (min-width : 960px)' href='".home_url()."/wp-content/themes/twentyeleven/style-xlarge.css'> 

当我的设备访问该网站，我可以检查它使用样式xsmall.css（最多320像素的宽度）。

说实话，它看起来像它的真正的宽度320像素（至少用于网页浏览）纵向和533像素（奇怪的大小）时，在横向。

任何线索？

Answer 1

您是否通过相关元标记设置了视口？否则屏幕可能会在大多数移动设备中自动缩放。结帐http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/

Answer 2

显然这是因为像素密度，在这个设备是1.5（480变成320和800变成533）。一些使用像素密度= 2的iOS设备似乎也会发生这种情况，它将实际密度除以2。

我已从此链接获得此信息：http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml。希望它对别人有帮助。

因此，当使用javascript屏幕属性时，firefox会检索设备宽度/高度，而原生android浏览器会获取“转换后”大小。

我还是不明白为什么在原生浏览器中，不同的分辨率会显示在设备方向上。

最后，做一些快速测试（不幸的是，我没有足够的时间来得出深刻的结论），似乎最大设备宽度和最大宽度与变换大小（320x533）一起工作。

尽管如此，如果其他人可以提供一些有关如何处理所有这些功能的相关信息，那么考虑到这一切有点混乱（至少对我而言）。