Webページを、スマホやタブレットの横幅に合わせて表示する方法

Webページを、スマホやタブレットの横幅に合わせて表示する方法

HTMLタブで指定します。具体的には、内のタグで以下のように指定。回転させてもちゃんと横幅に合わせて表示してくれる。

専門用語だらけの指定なので解説します
viewport = 表示領域
content = 内容(具体的な指定)
target-densitydpi = 表示する解像度
device-dpi = 実機の解像度(に合わせる)
width = 表示する時の横幅
device-width = 実機の横幅(に合わせる)
user-scalable = ピンチイン・ピンチアウトで拡大縮小できるか(no指定だと全く出来ない)

※Android系は、ちょっと怪しいかも~。(iPhone6+, iPhone5Sでは検証済)

【追記】
スマホ・タブレット用のページを全く作らずに(非レスポンシブWebデザイン)、PCサイトをそのままスマホで表示したいなら、viewport指定無しが一番簡単に自動的に横幅対応されます(metaタグのviewport指定は、あくまでモバイル用の指定なので…。)

コメントを残す

メールアドレスが公開されることはありません。