作为“响应式设计”的一种非常简单的方法,我为我正在开发的网站使用了两个版本的 CSS:
- 应在任何设备上显示的常规(非移动)版本 屏幕宽度大于 700px;
- 一个精简的移动版本,可以在任何设备上显示 屏幕宽度等于或小于 700 像素。
我使用 @media only screen 和 (max-device-width : 700px)
查询来分隔两组 CSS 规则。
我还使用此 JavaScript fragment 根据屏幕宽度分配视口(viewport)元标记参数:
<script type="text/javascript">
var width = screen.width;
var height = screen.height;
var meta = document.createElement("meta");
var head = document.getElementsByTagName("head")[0];
if (width >= 700) {
meta.setAttribute("name", "viewport");
meta.setAttribute("content", "width=1000");
head.appendChild(meta);
} else if (width <700) {
meta.setAttribute("name", "viewport");
meta.setAttribute("content", "width=device-width; initial-scale=1; maximum-scale=1");
head.appendChild(meta);
};
</script>
如果设备的屏幕宽度 >= 700px,脚本会将视口(viewport)的宽度设置为 1000px,本质上是确保非移动版网站的整个宽度适合屏幕,并将初始比例设置为1 如果屏幕宽度小于 700px。
再次说明一下,我想要完成的是:当屏幕宽度 > 700px 时,显示常规(非移动)网站;当屏幕宽度 <= 700px 时,显示流线型(移动)网站。
结果让我吃惊:
- Samsung Galaxy S (480x800) - 非移动版,横向和 纵向位置
- Samsung Galaxy S II (480x800) - 非移动版,横向和纵向位置
- 摩托罗拉 Droid Razr (540x960) - 非移动版,横向和 纵向位置
- 摩托罗拉 Droid 4 (540x960) - 非移动版,横向和
纵向位置 - Motorola Photon 4G (540x960) - 非移动版,横向和 纵向位置
- Motorola Atrix HD (720x1280) - 移动版 (!),横向和纵向 位置(即使两个屏幕尺寸都比 满足手机查询!)
- Motorola Razr (540x960) - 手机版,横向和纵向 位置(即使它的横向位置宽度超过 700 像素)
- HTC Wildfire (240x320) - 非移动版 (!),横向和 纵向位置(即使它有最小的屏幕 尺寸,两者都小于 700 像素!)
- Sony Xperia X10 (480x854) - 手机版,纵向和横向 位置(即使它的横向位置宽度超过 700 像素)
- LG Optimus 3D (480x800) - 非移动版,纵向和
横向位置 - Amazon Kindle Fire 2 (600x1024) - 手机版,纵向和 景观位置(即使其更宽的尺寸远高于 700 像素)
据我所见,我得出的结论是移动设备一团糟。大多数设备似乎将最高尺寸识别为最大宽度,但某些设备(Amazon Kindle 2)似乎将较低尺寸视为“宽度”,将较高尺寸视为“高度”。一些设备的屏幕尺寸低于 700 像素,但“假装”有更大的尺寸。
当我尝试使用 700 的 max-device-width
作为媒体查询的定义因素时,我似乎使用了错误的逻辑。
问题:使用以下规则创建一个覆盖尽可能多的设备的媒体查询:“如果屏幕的当前宽度 <= 700px,应用移动 CSS”——什么应该是适当的附加条件?
最佳答案
您是否包含了 viewport
元标记?
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
在看到您的viewport
脚本后,我想知道这是否是导致问题的原因
var width = screen.width;
if (width >= 700) {
meta.setAttribute("name", "viewport");
meta.setAttribute("content", "width=1000");
head.appendChild(meta);
}
是否将 width
变量设置为超过 700,因为在它查询屏幕宽度时,设备将默认缩放页面?
关于android - 媒体查询逻辑,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16610554/