3

假设身体中的所有元素都可以拉伸到 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 和三星的其他移动设备仍然需要这个功能？

4

1 回答 1

1

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

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

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

但是我有一个第二级导航元素，位置：绝对，左：100％和宽度：100％，这会扭曲手机上的实际网站宽度（导致网站非常宽，可能与手机的分辨率一样宽） .

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

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

我还必须包括手机的元视口......虽然也被广泛接受为 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>
于 2013-03-29T07:00:07.883 回答