viewport

viewport

PCとモバイル両方に同様のMIMEが指定されると、どちらのサイズにレイアウトを設定するかブラウザへ伝えられなくなってしまいます。

なので、Appleviewportを起用し、今では業界標準となっています。


モバイルページを利用する場合、viewportを設定しデバイス依存をなくす必要があります。

@mediaを使う場合、viewportを指定しなければなりません。

viewportスマホなど画面サイズが異なる場合の表示領域を指定してくれます。

# 横幅を端末に合わせたい場合
<meta name="viewport" content="width=device-width">

# 横幅を指定したい場合
<meta name="viewport" content="width=320">

# 初期ズーム率を設定したい場合(1 ~ 10 指定可能)
# 2倍ズームを指定したい場合
<meta name="viewport" content="initial-scale=2,0">

# ズーム可能かどうかを指定したい場合
<meta name="viewport" content="width=device-width, user-scalable=no">


# 最大、最小ズーム率を指定したい場合
# 1倍〜2倍ズームを可能にしたい場合
<meta name="viewport" content="minimum-scale=1.0, maximum-scale=2">

# 一度に指定可能です
<meta name="viewport" content="width=device-width, maximum-scale=2.0, minimum-scale=1.0,user-scalable=yes,initial-scale=1.0" />

以下は過去に使われていたviewportと同様のもの

<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="320">