web-dev-qa-db-ja.com

iOSデバイスのビューポートメタタグ

述べている

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

述べるのと同じ効果がある

<meta name="viewport" content="width=768" />

iPad用?

19
pingu

それは確かにデバイスの向きに依存します。特定のピクセル値を設定すると、レイアウトが1.333倍に拡大され、横長モードのときに1024ピクセルのデバイス幅に収まります。

一方、width=device-widthを設定しても何も拡大されませんが、ビューポートの幅が変更されます。これにより、メディアクエリを使用して最適化されたレイアウトを作成できます。または、それは少なくとも理論です。iPadは、ランドスケープモードでもwidth=device-widthを768pxと解釈します。実際のデバイス幅を取得するには、initial-scale = 1を追加する必要があります。

したがって、私はジェームズの提案に同意しません。ちょうど行く:

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

リキッド/レスポンシブレイアウトテクニックを使用してサイズの違いに対処します。

40
andreasbovens