Css 响应性设计混乱

就在我认为自己已经完全理解并组织了媒体查询和响应式设计的时候，我开始在一些设备上看到一些奇怪的行为，这些行为把它搞得一团糟

我的目的是提供一组媒体查询，以便涵盖所有不同的设备/分辨率。我看过一些带有示例的文章，并开始将它们付诸实践，但在三星Galaxy SII手机上进行测试时，它们似乎并不像预期的那样工作

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

我正在使用javascript screen.width和screen.height属性检查它使用的分辨率，以下是我的结果：

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

• 如果我使用Firefox浏览器，我会得到480x800宽的横向和纵向屏幕属性，但如果我尝试适应480px宽的图像，它不会，因为它看起来只有320px宽的真实屏幕

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

有人能解释这种奇怪的行为吗

有什么建议可以帮助您解决这个问题，并让媒体查询覆盖所有解决方案吗

编辑：

我已尝试使用viewport：

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

但仍然没有成功。实际上，根据hexblot给出的链接中的文章，“最大比例=1”不应该在我的设备中进行aoiv缩放，但它在我的设备中进行了缩放（可能只是针对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'>

在我的设备中访问站点时，我可以检查它是否使用style-xsmall.css（最宽320px）

老实说，在纵向方向上，它的实际宽度看起来是320px（至少对于网络浏览而言），在横向方向上，它的实际宽度是533px（奇怪的尺寸）

---

有什么线索吗？

您是否通过相关元标记设置了视口？否则，在大多数移动设备中，屏幕可能会自动缩放。签出

显然，这是因为像素密度，在这个设备中是1.5（480变为320，800变为533）。对于某些使用像素密度=2（实际密度除以2）的iOS设备，似乎也会发生同样的情况

我已从以下链接获得此信息：。希望对别人有帮助

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

我仍然不明白，为什么在本机浏览器中，不同的分辨率显示在设备方向上

最后，进行一些快速测试（不幸的是，我没有足够的时间得出深入的结论），似乎最大设备宽度和最大宽度都适用于隐藏大小（320x533）

---

尽管如此，考虑到这一切都有点混乱（至少对我来说），如果其他人能提供一些关于如何处理所有这些功能的相关信息，那就太好了。

谢谢hexblot，我在实践了本文中所说的内容后编辑了我的帖子，但我没有成功。你不应该真的把屏幕大小或最小/最大设备宽度作为布局的基础。您关心的是元视口或document.documentElement.clientWidth计算的视口大小。有关浏览器之间的功能失调，请参见此。