css - 响应式设计困惑

Question

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

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

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

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

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

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

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

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

有什么建议可以处理它并获得涵盖所有分辨率的媒体查询集吗？？

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

我试过视口(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(最大宽度为 320 像素)。

老实说，纵向显示时它的实际宽度看起来是 320 像素(至少对于网页浏览而言)，横向显示时是 533 像素(奇怪的大小)。

有什么线索吗？

Answer 1

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