こんにちは、オフィス狛 デザイン部のSatoです。
iOS15版のSafariで以前私がHTMLなどを作成したWebシステムを確認したところ、ステータスバーの色が変わっていることに気づきました。
自動的に選ばれた色とヘッダーの色味が少し違う色でしたので、逆に浮いて見えて困っていました。
ステータスバーをWebシステムのメインカラーの色に合わせられたら違和感を感じないのにと考え、色を制御する方法を探していたところ、色を指定できるようなので忘れないよう備忘録も兼ねてブログに書いてみようと思います。
ステータスバーの背景色を指定する方法、それは「theme-color」というmetaタグを書くだけです。
headタグの中に下記を記述することで色を変えることができます。
<meta name="theme-color" content="任意の色">
任意の色の部分にカラーコードを指定するだけで、ステータスバーやアドレスバーの背景色が変わります。
<meta name="theme-color" content="#dcdcdc">をheadタグの中に記述しました。
「theme-color」を指定した場合も、明度の高いペールカラーのような色を指定した場合にはダークモードでは色が変わらないこともあるようですが、それはダークモードの仕様上仕方ないかと思います。
余談ですが、iOS15版のSafariから画面下部にアドレスバーが表示される関係だと思うのですが、要素が少ないページの背景色がアドレスバーの下には回り込まないで下に「theme-color」で指定した色が表示されてしまったりします。
上記のような状態になった場合は、全体を囲んでいるタグにheight: 100vh;を指定すると背景が下まで表示されるようになりました。（余白が空いてしまった例のCSS指定は height: 100%; にしていました）
簡単なことなのですが、少しつまづいてしまったので、似たような現象に悩まれた方は試してみてはいかがでしょうか？
2022/11/01日 height:100vhを設定するよりも綺麗に背景色設定する方法ができた為、新しくブログ記事を書きました！（この方法だと、余分なスクロールができません）
iOS15版のSafariはレイアウト含めさまざまな変更点があり、技術者はもちろん普通に使っているユーザーも覚えることが多くて大変ですね……。
今後もiOS版Safariの仕様変更には気をつけていきたいです。
0 件のコメント:
コメントを投稿