PCサイトをドラッグ&ドロップでスマホ対応!

  • ログイン
  • ユーザ登録

viewport(可視領域)の設定ができるようになりました。

2012年4月1日 | 森下 奈緒

シェアする

ページ設定(要素を何も選択していない時のプロパティの一番左のボタン)にviewport設定を追加しました。

これによって、表示する縮尺や、ズームが可能かどうかなどを設定できます。
このviewport設定は、ページごとの設定となります。

■管理画面のviewport設定箇所
編集画面上のスマホレイアウト画面下にある構造リンクから、「ページ」を選択するとページ全体の設定を行える編集メニューが表示されます。
その中の「viewport」項目を変更することができます。

shutto_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ではピンチイン、ピンチアウトの機能はなるべく必要のないデザインで制作することを推奨しております。

スマホ向け表示
株式会社イー・エージェンシー

〒100-0006 東京都千代田区有楽町1-9-4 蚕糸会館4階