HTML5のスマホ用メタタグ
HTML5で<meta name="viewport" />というメタタグがあります。これはスマホ向けにするという意味があります。
以下のような記述方法になります。
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
content属性で色々指定しています。以下その説明です。
属性 | 意味 |
width | |
initial-scale | 1:倍率が1であることを意味する。 |
user-scalable | 0:拡大縮小不可。1:拡大縮小可能。 |
解釈が難しいですが、widthとinitial-scaleはそのままで、変更する可能性があるのはuser-scalableだけだと思います。
apple-mobile-web-app-capable
content="yes"にすると、ホーム画面に登録されたアイコンから起動した時にフルスクリーンモードになります。
apple-mobile-web-app-status-bar-style
apple-mobile-web-app-status-bar-styleは、ステータスバーの色を指定します。
apple-touch-icon
apple-touch-icon属性は、ホーム画面に登録された時に使われるアイコン画像を指定します。
Webアプリでもホーム画面に登録することはできるので、ホーム画面に登録した時にこの属性で指定したアイコンが表示されます。