2

我正在建立一个响应式网站，有 3 种尺寸。最大 480 像素、最大 768 像素和最大 1024 像素+；但是，我在使用 iPad 时遇到了问题。在 Galaxy Tab 10.1 上它就像一个魅力，在我的浏览器中它也很好用。但似乎每当我使用 iPad 时，它似乎总是认为最大宽度是 768 像素。

这就是我的意思： 解释

这是我的代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<meta name="viewport" content="width=device-width, user-scalable=no" />
</head>
<style type="text/css">

body {
    background-color: red;
}

@media screen and (max-width: 480px) {
    body {
        background-color: green;
    }
}

@media screen and (min-width: 481px) and (max-width: 1023px) {
    body {
        background-color: brown;
    }
}

@media screen and (min-width: 1023px) {
    body {
        background-color: blue;
    }
}

</style>
<body>
<div class="color">
    Some color
</div>
</body>
</html>

虽然我的要求不包括 iPad 支持，但我确实想支持它。

4

1 回答 1

3

这可能与 max-scale、min-scale 和 initial-scale 有关 - 尝试将所有这些设置为 1 并查看是否有任何变化。

缺点是 iOS 用户将无法通过捏合来放大您的页面。

当您旋转 iPad 时，它不会改变视口，而是缩放内容。艾伦派克有一个很好的解释。

于 2012-11-09T12:15:53.117 回答