Question

假设身体中的所有元素都可以拉伸到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">

请注意，纵向和横向之间的初始比例（错误）已在iOS 6 for iPad中修复，因此不再需要上述内容......

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

Answer 1

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

正如我最初计划的那样，下面就足够了（overflow-x只是保险）：

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

然而，我有一个二级导航元素，位置为：绝对，左：100％和宽度：100％，这扭曲了手机上的实际网站宽度（导致一个非常宽的网站，可能与手机的决议。）

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

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

我还必须为手机添加元视口... 虽然广泛接受作为iPad网站缩放的答案，但宽度=设备宽度和初始规模实际上搞砸了我的网站缩放在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>

响应式扩展移动网站，以获得完整的手机宽度

1 个答案: