Question

当我认为我对媒体查询和响应式设计都理解和组织时，我已经开始在某些设备中看到一些奇怪的行为，这使得它变得混乱。

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

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

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

在原生浏览器中，我在纵向加载页面时获得320x450分辨率。但是在同一个浏览器中，如果我以横向方向重新加载页面，我会得到533x235的尺寸。就在这里它很奇怪，因为我希望无论使用的方向如何都具有相同的高度和宽度。另外，它们都不符合声称的480x800设备分辨率。
如果我使用Firefox浏览器，我会获得横向和纵向方向的480x800宽度屏幕属性，但如果我尝试适合480px宽度的图像，则不会，因为它看起来只有320px宽度。 / p>

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

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

有任何建议可以接近它并获取媒体查询以涵盖所有分辨率吗？

EDIT ::::::::::::::

我尝试过使用viewport：

<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）。

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

有任何线索吗？

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浏览器会获得“转换”大小。

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

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

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

反应灵敏的设计

2 个答案: