iOS デバイスのビューポート メタ タグを理解しようとしています。テスト ページを作成し、幅 862 ピクセルの画像を挿入しました。だから私はビューポートのメタタグを次のように持っています:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale: .5, maximum-scale: 5.0">
しかし、iPad 3 では、解像度幅が 1536 ピクセルで、ビューポートが iPad 3 と同じ量の可視領域に設定されているため、862px の画像は拡大され、可視領域よりも幅が少し大きくなります。そのため、残りの画像を見るには水平にスクロールする必要があります。
これにより、device-width が 768 ピクセルを返していると思われます。これは、862 ピクセルの画像の水平スクロールが少し余分にあることを示しています。なぜこれを行うのですか？考慮しなければならないある種のピクセル密度はありますか?
アップデート
幅を数値幅、画像とまったく同じ幅 (この場合は「862」) に設定しようとしました。したがって、Web ページは画像と同じ 862X206 ですが、幅を device-width に設定するのとまったく同じことを行っています。
更新 2
私は非常に単純なページを作成しました。何らかの理由で、862 ピクセルのビューポートを持つ空白のページにより、iPad 3 で水平および垂直スクロールが発生します。コードは次のとおりです。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=862, initial-scale=1.0">
</head>
<body style="width:100%; padding:0; margin:0">
</body>
</html>
このスクロールにより、ビューポートが表示可能領域または画面サイズ内に収まりません。理解できない。どんな洞察も大歓迎です。ありがとうございました。** 注 ** パディングとマージンのリセットを 0 に追加するのを忘れていました。8 ピクセルのマージンを追加していました。
更新 3
わかりました、もともと、device-width は ipad 3 の 1536 ピクセルの解像度幅を返すと思っていました。どうやら、768 ピクセルの画面サイズを返すようです。
ビューポートの幅が 768 を超えると、iPad 3 でスクロールできます。なぜですか? 1024 ピクセルのページがあり、それを iPad 3 の表示領域に合わせたい場合はどうでしょうか。見える範囲？
解決
各デバイスにページのスケーリング方法を理解させたい場合は、初期スケールを除外するだけです。
したがって、device-width または数値のいずれかを使用して幅だけを設定し、initial-scale を除外すると、自動的にズームが計算されます。そしてそれはうまくいきます。
私の混乱は、幅の意味にありました。幅は、スケールが適用される前の幅を意味します。
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale: .5, maximum-scale: 5.0">
スケール前のビューポートの幅は 768 です。Web ページのボディが 862px で、スケール係数 1.0 が適用された後、コンテンツは 1.0、862*1.0 で乗算されるため、ビューポートの幅は次のようになります。そのスケール係数 862px でスケーリングされたコンテンツの幅。私はこれを正しく理解していることを願っています。それが私の混乱の原因であり、幅が意味するものでした。