媒体查询逻辑

Question

作为“响应式设计”的一种非常简单的方法，我有两个版本的 CSS 用于我正在开发的网站：

• 应在任何设备上显示的常规（非移动）版本 屏幕宽度超过 700 像素；
• 精简的移动版本，可在任何设备上显示 屏幕宽度等于或小于 700 像素。

我使用@media only screen and (max-device-width : 700px) 查询来分隔两组CSS 规则。

我也使用这个 JavaScript sn-p 根据屏幕宽度分配视口元标记参数：

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

如果设备的屏幕宽度 >= 700 像素，该脚本会将视口的宽度设置为 1000 像素，本质上是确保网站的非移动版本的整个宽度适合屏幕，并将初始比例设置为1 如果屏幕宽度小于 700px。

再次澄清一下，我想要完成的是：当屏幕宽度> 700px 时，显示常规（非移动）网站；当屏幕宽度

结果让我吃惊：

• 三星 Galaxy S (480x800) - 非移动版，横向和 纵向位置
• 三星 Galaxy S II (480x800) - 非移动版，横向和纵向位置
• Motorola Droid Razr (540x960) - 非移动版，横向和 纵向位置
• Motorola 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 像素）

据我所见，我认为移动设备一团糟。大多数设备似乎将最高尺寸视为最大宽度，但有些（亚马逊 Kindle 2）似乎将较低尺寸视为“宽度”，将较高尺寸视为“高度”。一些设备的屏幕尺寸低于 700 像素，但“假装”具有更高的尺寸。

当我尝试使用 700 的 max-device-width 作为媒体查询的定义因素时，我似乎使用了错误的逻辑。

问题：使用以下规则创建一个覆盖尽可能多设备的媒体查询：“如果屏幕的当前宽度为

Answer 1

您是否包含了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，因为在它查询屏幕宽度时，设备将默认缩放页面？

Answer 2

正如邓肯所说，添加viewport 标签。

理想情况下将其设置为：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

然后调整您的媒体查询以使用max-width 而不是max-device-width。

进行这些更改后，我很想看看您的测试结果。