就在我以为我对媒体查询和响应式设计的所有理解和组织时,我开始在某些设备中看到一些奇怪的行为,这使得它变得一团糟。
我的意图是拥有一组媒体查询,我可以使用这些查询涵盖所有不同的设备/分辨率。我看过一些带有示例的文章并开始将它们付诸实践,但是在三星 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 像素(奇怪的尺寸)。
有什么线索吗?