スマホページだけフォントサイズ指定がうまくいかない場合
posted : 2018.04.17
こんにちわ、ma-ya’s CREATE［まーやずくりえいと］です。
先日、スマホページだけGist内の文字サイズがおかしいので修正しようとした時に気付いたことです。
ちょっと盲点で気が付くまで時間がかかってしまったので記事にしておきます。
iphoneでフォントサイズ指定が効かない
iphoneブラウザやAndroidの一部のブラウザではこちらの意図したフォントサイズ指定が効かない場合があります。
これがいつものことであればすぐに気づくんですが、効かない場合があるというところがミソ。
僕の場合はGist内の文字サイズでした。
「-webkit-text-size-adjust」を「100％」で解決
結果から言うとこれを下記のように指定してやります。
<body>か文字サイズを変更したい要素に指定してやるといいと思います。
「none」指定はご法度
-webkit-text-size-adjust: none; で自動調節機能そのものをOFFにしてやればいいんでない？というのは危険らしいです。
noneにしてしまうと、PC版のSafari / chrome でページ拡大しても文字だけ拡大されないからとのこと。
つまり画像関係だけ拡大されて文字サイズは拡大できないということですね。
サイトによっては僕もブラウザ拡大して見ることがあるので、それは嫌だなと思いました。
-webkit-text-size-adjustそのものが効かない場合
ちなみにそもそも-webkit-text-size-adjust自体が効かない！という時は、viewport設定のscaleを指定してやるといいらしいです。
ただこれは古いOSの場合らしいので、もうあんまりないことだと思いますが一応補足として。
<meta name="viewport" content="width=device-width,initial-scale=1">
悩みどころ
<body>に指定するか文字サイズを変更したい要素に指定するかで今ちょっと悩んでます。
個人的に自動調整自体は「いらない！」と言い切れるものでもないので、どうしようかなーという感じ。
こういう時、いろんなデバイスでテストしたいんですがなかなかね。。
