スマホのブラウザの外観をいじる

スマホのブラウザでは、わずかにブラウザの外観を制御できるものがある。

iOS Safari

ホームアイコンからの起動時に、以下の指定でブラウザの枠をなくす事ができる。

<meta name="apple-mobile-web-app-capable" content="yes">

見た目は以下のようになる。

適用前
適用後
<meta name="apple-mobile-web-app-status-bar-style" content="black">

ブラウザの枠を非表示にしている場合に、OSのステータスバーの見た目を制御できる。初期値はblackで、defaultblack-translucentが指定可能。なんで初期値がdefaultじゃないねん。それぞれ以下のような見た目になる。

black
default
black-translucent

以下のようにしてホームアイコンからの起動時にスプラッシュ・スクリーンを指定できるとあるが、現状は動作しない。

<link rel="apple-touch-startup-image" href="icon.png">

Android Chrome

ブラウザの枠の色を調整できる。こちらはホームアイコンからの起動時に限らない。HTML Standardには記載があり、今後各ブラウザに展開される可能性はある。

<meta name="theme-color" content="#4285f4">

スクロールバー

このほどInternet Explorerの独自実装だったスクロールバーのCSSW3Cの草案にお目見えした(Webkit系もたくさん擬似クラスを実装しているけど)。今のところは標準実装しているブラウザは無い。今後はそういったブラウザの外観に関わるスタイルの標準化が進むかも知れない。色とか外観とかはスタイルな分野なので、最終的にはCSS側に移行して収まって欲しいけどね。

参考