Question

我正在建立一个有3种尺寸的reponsive网站。最大480px，最大768px和最大1024px +; 但是，我在使用iPad时遇到问题。在Galaxy Tab 10.1上，它的功能就像一个魅力，在我的浏览器中它的效果也很好..但似乎每当我使用iPad时，它似乎总是认为最大宽度是768px。

这就是我的意思： Explenation

这是我的代码：

<!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支持，但我确实想支持它。

Answer 1

这可能与最大规模，最小规模和初始规模有关 - 尝试将所有这些设置为1并查看是否有任何变化。

缺点是iOS用户无法缩小页面。

旋转iPad时，它不会更改视口，而是会缩放内容。 Allen Pike有一个很好的解释。

iPad总是假设纵向宽度为最大宽度

1 个答案: