响应式设计混乱

Question

就在我以为我已经了解并组织了有关媒体查询和响应式设计的所有内容时，我开始在某些设备中看到一些奇怪的行为，这使得它变得一团糟。

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

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

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

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

1234563 /p>

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

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

有什么建议可以接近它并让媒体查询集涵盖所有分辨率？？

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

我尝试过使用视口：

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

仍然没有成功。实际上，根据 hexblot “maximum-scale=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（宽度最大为 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 浏览器获取“转换后的”尺寸。

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

最后，做一些快速测试（不幸的是，我没有足够的时间得出深入的结论），似乎 max-device-width 和 max-width 都适用于转换后的尺寸 (320x533)。

不过，考虑到这一切都有些混乱（至少对我而言），如果其他人能提供一些有关如何处理所有这些功能的相关信息，那就太好了。