2

私は3つのサイズの応答性の高いWebサイトを構築しています。最大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のサポートは含まれていませんが、サポートしたいと思います。

4

1 に答える 1

3

これはおそらく、最大スケール、最小スケール、および初期スケールと関係があります。これらすべてを1に設定して、何かが変わるかどうかを確認してください。

欠点は、iOSユーザーがピンチしてページを拡大できないことです。

iPadを回転させても、ビューポートは変更されず、コンテンツが拡大縮小されます。アレンパイクからの良い説明があります。

于 2012-11-09T12:15:53.117 に答える