4

次の基本的なhtmlコードブロックについて考えてみます。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>iPad test</title>
    <meta name="viewport" content="width=device-width">
    <style>
        body
        {
            margin:0;
        }
        #content
        {
            margin: 0 auto;
            width: 980px;
            border:1px solid #c4c4c4;
            background-color:#f5f5f5;
        }
    </style>
</head>
<body>
<div id="content">
    A small amount of content
</div>
</body>
</html>

iPadで表示した場合、980pxのメインコンテンツ領域はiPadの画面に合わせて自動ズームされません。A small amount of contentただし、大量のコンテンツに置き換える場合、つまり、垂直スクロールを引き起こすのに十分な場合、ページはiPadで自動ズームされます。

なぜこれなのか誰か知っていますか？私は高低を検索してきましたが、ページに最小限のコンテンツがあるときに自動ズームを強制的に発生させる方法が見つからないようです。

もちろん、ビューポートのコンテンツを変更しwidth=980て問題を修正しますが、レスポンシブWebサイトを作成しているため、ビューポートはである必要がありますdevice-width。

メディアクエリを使用してスマートフォンのコンテンツ領域のCSSを（100％幅に）変更しており、iPad用のWebサイトの標準デスクトップバージョンを使用したいと考えていました。

どんなアイデアでも大歓迎です。

注：Retinaディスプレイを搭載したiPadでテストしていますが、古いモデルで何が起こるかわかりません。

4

2 に答える 2

7

これを中断した後、私は別の角度から戻ってきました。ビューポートの幅を特定の値に設定すると、iPad の問題が解決するのであれば、それを実行してみませんか。

したがって、私にとっての解決策は、ビューポートの幅をデフォルトで device-width に設定してスマートフォン デバイスを処理し、iPad を検出してビューポートの幅を調整することでした。

<meta name="viewport" content="width=device-width">

<script type="text/javascript">
    if(navigator.userAgent.match(/iPad/i)) {
        viewport = document.querySelector("meta[name=viewport]");
        viewport.setAttribute('content', 'width=980');
    }
</script>

ご提案いただきありがとうございますここにユーザー名を挿入してください

于 2012-07-13T04:04:43.157 に答える
2

これを試して：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

コンテンツ全体は後で収まります。

于 2012-07-03T17:14:23.360 に答える