web-dev-qa-db-ja.com

iOSの横向きモードで<meta name = "viewport" content = "width = device-width">は何をしますか?

IOSのスケーリング属性を理解しようとしています。

  1. Appleの開発者用ドキュメント によると、<meta name="viewport" content="width=device-width">は、ページが読み込まれたときに(縦向きモードで)、Webページを1:1ピクセル比にスケーリングするようiOSに指示します。

  2. HTML5Boilerplate(スライド13を参照)の人々による プレゼンテーション によれば、device-widthは、デバイスの向きに関係なく、常にiOSデバイスの画面の小さい方の尺度に対応します。

  3. したがって、iOSで<meta name="viewport" content="width=device-width">宣言横向きでデバイスを保持している間、iOSは画面の高さのように見えるものに従ってビューポートの幅を設定し、1.5:1(iPhone 4s)または2:1(iPhone 5)のピクセル比になります。

「幅」と「デバイス幅」の定義をAppleが使用している)と誤解していますか?

さらに、iOSデバイスが回転すると、ビューポートは何を維持しますか?それは幅ですか、それともスケールですか?メタ設定に依存しますか?

14
Brandon Lebedev

Appleの開発者ドキュメントによると:

「同様に、ビューポートの幅のみを指定すると、高さと初期スケールが推定されます。ランドスケープの向きは、デバイスの幅に等しい幅を維持します。これにより、初期スケールが変更され、ユーザーが横向きに変更しました。」

この記事では、iOSは向きやデバイスの回転に関係なく、同じビューポート設定を維持すると述べています。

「Safariが幅、高さ、初期スケールを推測する方法」の こちら を参照してください。

5
Brandon Lebedev