ページ設定（要素を何も選択していない時のプロパティの一番左のボタン）にviewport設定を追加しました。
これによって、表示する縮尺や、ズームが可能かどうかなどを設定できます。
このviewport設定は、ページごとの設定となります。
■管理画面のviewport設定箇所
編集画面上のスマホレイアウト画面下にある構造リンクから、「ページ」を選択するとページ全体の設定を行える編集メニューが表示されます。
その中の「viewport」項目を変更することができます。
viewportの設定
・デフォルト設定
常に縮尺は等倍、ズームなどは不可、という設定になっています。
width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no
・設定変更例
例: ピンチによるズームを可能にする 「maximum-scale」の値を5.0、「user-scalable」をyesに変更しています。
width=device-width,initial-scale=1.0,maximum-scale=5.0,minimum-scale=1.0,user-scalable=yes
デフォルト時の表示は拡大しない
拡大しようとしても拡大できない。
viewportの設定で拡大を許可
ピンチアウトすると拡大される。
■viewportプロパティ
| プロパティ名 | 意味 | 範囲 |
|---|---|---|
| width | 横幅 | 200から10000px |
| height | 縦幅 | 223から10000px |
| initial-scale | 初回アクセス時の拡大率 | minimum-scaleとmaximum-scaleの間 |
| user-scalable | ユーザーに拡大縮小の操作を許可 | yes/no |
| minimum-scale | 拡大率の下限 | 0から10.0 |
| maximum-scale | 拡大率の上限 | 0から10.0 |
■対応OS
iOS9まで
※iOS10以降は、OSの仕様変更により、この機能が利用できません。
※AndroidOSは端末によって対応しないものがあります。
（shuttoはviewportを指定すると必ず出力していますが、端末によりうまく機能しないものがあるようです。）
■ご注意事項
viewportの設定を行った場合、各端末により挙動が異なる可能性があります。
誠に恐れ入りますが、お客様が想定される端末で検証の上ご利用いただくようお願い申し上げます。
なお、shuttoではピンチイン、ピンチアウトの機能はなるべく必要のないデザインで制作することを推奨しております。
