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

【问题标题】：iPad always assuming portrait-width as max-widthiPad总是假设纵向宽度为最大宽度
【发布时间】：2012-10-29 15:15:07
【问题描述】：

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

这就是我的意思：

这是我的代码：

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

【问题讨论】：

这可能与max-scale、min-scale 和initial-scale 有关 - 尝试将所有这些设置为1，看看是否有任何变化。当您旋转 iPad 时，它不会改变视口，而是缩放内容。横向重新加载页面有效吗？
这确实有很大帮助，我仍然在页面右侧有一个白色边框，但我可以忍受。添加作为答案，我会批准它。

标签： html ipad css media-queries

【解决方案1】：

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

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

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

【讨论】：