android - 移动网站的响应式缩放以具有完整的手机宽度

Question

假设 body 中的所有元素都可以拉伸(stretch)到 100% - 除了做这样的事情:

body {
     overflow-x:hidden;
     width:320px;
}

@media all and (min-width: 360px) {
    body {
        width:360px;
    }
}

@media all and (min-width: 369px) {
    body {
        width:369px;
    }
}

@media all and (min-width: 480px) {
    body {
        width:480px;
    }
}

@media all and (min-width: 533px) {
    body {
        width:533px;
    }
}

@media all and (min-width: 569px) {
    body {
        width:569px;
    }
}

@media all and (min-width: 640px) {
    body {
        width:640px;
    }
}

是否有比上述更好/更少硬编码的方法？

此外，对于在移动设备中使用它也有不同的看法:

<meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">

阅读纵向和横向之间的初始比例(错误)已在适用于 iPad 的 iOS 6 中得到修复，因此不再需要以上...

但我可以假设新旧 iPhone 以及 Android 和三星的其他移动设备仍然需要这样做吗？

Answer 1

发现问题。网站全宽不需要所有媒体查询(尽管这是涵盖大多数设备的相当广泛的列表)。

按照我最初的计划，下面的内容就足够了(overflow-x 只是保险):

body {
     overflow-x:hidden;
     width:100%;
}

然而，我有一个二级导航元素，其位置为:绝对、左:100% 和宽度:100%，这扭曲了手机上的实际网站宽度(导致网站非常宽，可能与手机的分辨率)。

一旦元素的左侧位置仅由 JavaScript 设置(而不是在初始网站加载时由手机读取)，问题就解决了。

经验教训是在移动设备上注意位置绝对元素，即使隐藏了溢出，这些元素也可能会扭曲手机识别的实际网站宽度。

我还必须包括手机的元视口(viewport)...... 尽管也被广泛接受为 iPad 网站缩放的答案，但 width=device-width 和初始比例实际上搞砸了我的网站在 iPad(最新操作系统)上的纵向-横向-纵向之间的缩放。

没有它意味着缩放效果完美!需要在 iPhone(最新操作系统)上进行测试以确定它的行为是否像 iPad(方向错误应该被修复)。

<meta name="viewport" content=""/>
<script>
if (!navigator.userAgent.match(/iPad/i)) {
    var viewportmeta = document.querySelector('meta[name="viewport"]');
    if (viewportmeta) {
        viewportmeta.content = 'width=device-width, initial-scale=1';
    }
}
</script>