Question

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

应在任何设备上显示的常规（非移动）版本屏幕宽度超过700px;
一个简化的移动版本，可以在任何设备上显示屏幕宽度相等，或者窄于700px。

我使用@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>

如果设备的屏幕宽度大于＆gt; = 700px，脚本会将视口的宽度设置为1000px，从而确保网站的非移动版本的整个宽度适合屏幕，并设置初始比例如果屏幕宽度小于700px，则为1。

再次，为了澄清，我想要完成的是：当屏幕宽度为＆gt; 700px，显示常规（非移动）网站;当屏幕宽度<= 700px时，显示流线型（移动）网站。

结果让我感到惊讶：

三星Galaxy S（480x800） - 非移动版，风景和肖像位置
三星Galaxy S II（480x800） - 非移动版，风景和人像位置
摩托罗拉Droid Razr（540x960） - 非移动版，风景和肖像位置
摩托罗拉Droid 4（540x960） - 非移动版，风景和
肖像位置
摩托罗拉Photon 4G（540x960） - 非移动版，风景和肖像位置
摩托罗拉Atrix HD（720x1280） - 移动版（！），风景和肖像位置（即使两个屏幕尺寸都比平面尺寸宽满足移动查询！）
摩托罗拉Razr（540x960） - 移动版，风景和肖像位置（即使其横向位置宽于700px）
HTC Wildfire（240x320） - 非移动版（！），风景和纵向位置（即使它具有最小的屏幕尺寸，小于700px！）
Sony Xperia X10（480x854） - 移动版，纵向和横向位置（即使其横向位置宽于700px）
LG Optimus 3D（480x800） - 非移动版，肖像和
景观位置
亚马逊Kindle Fire 2（600x1024） - 移动版，肖像和景观位置（尽管其更广泛的维度是如此 700像素）

从我看到的情况来看，我的结论是移动设备很乱。大多数设备似乎将最高尺寸识别为最大宽度，但是一些（亚马逊Kindle 2）似乎将较低尺寸视为“宽度”而较高尺寸视为“高度”。有些设备的屏幕尺寸低于700px，但“假装”有更高的尺寸。

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

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

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

正如Duncan所提到的，添加viewport标记。

理想情况下将其设置为：

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

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

我有兴趣在进行这些更改后看到您的测试结果。

媒体查询逻辑

2 个答案: