android - 媒体查询逻辑

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

常规（非移动）版本，应在任何设备上显示
屏幕宽于700像素；
精简的移动版本，可以在带有
屏幕宽度相等或小于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>

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

再次说明一下，我要完成的工作是：当屏幕宽度> 700px时，显示常规（非移动）网站；当屏幕宽度
结果令我惊讶：

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

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

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

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

最佳答案

您是否包含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);
}