Webページを、スマホやタブレットの横幅に合わせて表示する方法
HTMLタブで指定します。具体的には、
内のタグで以下のように指定。回転させてもちゃんと横幅に合わせて表示してくれる。|
1 |
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, user-scalable=yes"> |
専門用語だらけの指定なので解説します
viewport = 表示領域
content = 内容(具体的な指定)
target-densitydpi = 表示する解像度
device-dpi = 実機の解像度(に合わせる)
width = 表示する時の横幅
device-width = 実機の横幅(に合わせる)
user-scalable = ピンチイン・ピンチアウトで拡大縮小できるか(no指定だと全く出来ない)
※Android系は、ちょっと怪しいかも～。(iPhone6+, iPhone5Sでは検証済)
【追記】
スマホ・タブレット用のページを全く作らずに(非レスポンシブWebデザイン)、PCサイトをそのままスマホで表示したいなら、viewport指定無しが一番簡単に自動的に横幅対応されます(metaタグのviewport指定は、あくまでモバイル用の指定なので…。)