0

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

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

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

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

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

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

实际上，所有这些情况下的实际分辨率似乎都是 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（最大 320px 宽度）。

老实说，它的实际宽度在纵向时看起来是 320 像素（至少对于网页浏览而言），而在横向时它的实际宽度是 533 像素（奇怪的尺寸）。

有什么线索吗？

4

2 回答 2

2

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

于 2013-02-27T16:17:37.323 回答
0

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

我从这个链接得到了这个信息：http ://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml 。希望对其他人有帮助。

因此，似乎在使用 javascript 屏幕属性时，firefox 检索设备宽度/高度，而本机 android 浏览器获取“转换后的”尺寸。

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

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

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

于 2013-02-27T17:13:17.867 回答