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 回答