Download to read offline
![Viewport の設定方法
<html>
<head>
<meta name="viewport" content="[ プロパティ ]=[ 値 ](, [ プロパ
ティ ]=[ 値 ])">
・・・
</head>
<body>
・・・
</body>
</html>](https://image.slidesharecdn.com/developersstudy20120412-120412024015-phpapp02/75/Viewport-3-2048.jpg)
Viewportのお話
- 1. SmartPhone 用 viewを変化させる 魔法の meta タグ Viewport のお話
- 2. Viewport とは？ ウィンドウサイズにあわせて拡大率を可変させるおまじ ないです。 デフォルトで Viewportの横幅は 980px に設定されてい ます。 例えば、横幅が 780px のウェブページでは 200px の余 白が生まれ、 またリキッド（可変）レイアウトのウェ ブページでは横幅が 980px に設定されます。 iPhone の実際の画面サイズは、縦に持った際は 320x480px 、横に持った際は 480x320px となりますの で、 デフォルトの 980px で表示した場合、 PC 概ね 1/3 ～ 1/2 程度のサイズに縮小表示されます。 その為、ペ ージを開いた時点では文字が小さすぎて判読出来ないこ とがしばしば起こり得ます。 xhtml にはこの Viewport を操作する Meta Tag が用意さ れています。 これにより、 PC 等他の環境からの閲覧 に影響を与えずに、 SmartPhone に適したウェブサイト
- 3. Viewport の設定方法 <html> <head> <meta name="viewport" content="[ プロパティ ]=[ 値 ](, [ プロパ ティ ]=[ 値 ])"> ・・・ </head> <body> ・・・ </body> </html>
- 4. プロパティの詳細 プロパ 値 ティ 単位・指定方 内容 デフォルト 許容範囲 その他 法 Viewport の 特別な値として「 device-width* 」の width px 980px 200 ～ 10,000px 横 指定が可能 幅 Viewport の 横幅とアスペクト比か 特別な値として「 device-height* 」の height px 200 ～ 10,000px 縦 ら計算される値 指定が可能 幅 乗数で指定 minimum-scale （後述）～ 倍率の （例： 表示範囲から initial-scale maximum-scale （後 初期値 120% の場 計算される値 述） 合は 1.2 ） minimum- 倍率の 乗数で指定 0.25 0 ～ 10 scale 最小値 maximum- 倍率の 乗数で指定 1.6 0 ～ 10 scale 最大値 拡大縮小 no （拡大縮小不可）にすることで の user-scalable -- （ yes / no ） yes -- フォーム入力時のスクロールも 可 不可 否 えば以下は、 Viewport の横幅が iPhone のディスプレイのサイズで、倍率は 1 、 2 倍まで拡大可能、という内容です <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
- 5. 注意点 コンテンツより小さい viewport width/heightを設定すると無視 される viewport で initial-scale を設定せずに width/height を設定する と 全画面表示となる viewport で initial-scale も width/height も設定しないと width=980px/height=1091px となる 表示域とコンテンツのサイズが一致しない場合に initial-scale を設定すると、意図しないレイアウトが発生する ことがある