0

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

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

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

我还使用这个 JavaScript 片段根据屏幕宽度分配视口元标记参数：

<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 时，显示常规（非移动）网站；当屏幕宽度 <= 700px 时，显示流线型（移动）网站。

结果让我吃惊：

  • 三星 Galaxy S (480x800) - 非移动版，横向和纵向位置
  • 三星 Galaxy S II (480x800) - 非移动版，横向和纵向位置
  • Motorola Droid Razr (540x960) - 非移动版，横向和纵向位置
  • Motorola Droid 4 (540x960) - 非移动版，横向和
    纵向位置
  • Motorola Photon 4G (540x960) - 非移动版，横向和纵向位置
  • 摩托罗拉 Atrix HD (720x1280) - 移动版 (!)，横向和纵向位置（即使两个屏幕尺寸都比移动查询更宽！）
  • 摩托罗拉 Razr (540x960) - 移动版，横向和纵向位置（即使其横向位置大于 700 像素）
  • HTC Wildfire (240x320) - 非移动版 (!)，横向和纵向位置（尽管它的屏幕尺寸最小，但都小于 700 像素！）
  • Sony Xperia X10 (480x854) - 移动版，纵向和横向位置（即使其横向位置大于 700px）
  • LG Optimus 3D (480x800) - 非移动版，纵向和
    横向位置
  • Amazon Kindle Fire 2 (600x1024) - 移动版，纵向和横向位置（即使其更宽的尺寸远高于 700 像素）

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

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

问题：使用以下规则创建一个覆盖尽可能多设备的媒体查询：“如果屏幕的当前宽度 <= 700 像素，则应用移动 CSS”——适当的附加条件应该是什么？

4

2 回答 2

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

于 2013-05-17T13:49:03.377 回答
1

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

理想情况下将其设置为：

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

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

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

于 2013-05-17T13:51:50.100 回答