-webkit-text-size-adjust: 100%; を指定しないとスマホで文字サイズがおかしくなる
このブログのテーマを変更したついでに、今までずっと iPhone の Safari で表示が壊れていたことに気づいた。
CSS を書くことを生業にしている方には自明のことだろうと思うのだが、
html {
text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
と指定しておかないとスマホで見たとき勝手に文字の大きさを変更してレイアウトが壊れることがある。
このブログは今までずっと Android で動作確認してきて特に問題なかったのだが、最近 iPhone を買ったので iPhone で確認したら <pre> ブロック内が見事に壊れていた。
今回、ブログのテーマを変更するついでに直した。
今まで使っていたテーマの “nox” は公開していたがアーカイブした。
“nox” はまだバグっているが、バグっていることに気づく前にアーカイブしてしまったので放置している。
新しいテーマは “nox” のレイアウトを概ね引継ぎ、以前よりも少し気を使ってレイアウトを調整した。
あとライトテーマのほうが見やすい人もいると思うので、端末の設定がライトテーマだったらライトテーマで表示するようにした。
フォントについては結構どうでもいいかなという気持ちになったので、読み込みの速さを優先して Web フォントをやめた。
本文は sans-serif, ソースコード部分は monospace しか指定していないので、各自読みやすいフォントを指定してもらえればいいと思う。
ついでに favicon も新しくし、SVG 対応ブラウザでは favicon のダークモード対応もした。
半日で作ったので変な部分が見つかり次第修正する。
以上