WordPress備忘録 viewport設定と-webkit-text-size-adjust
WordPressに限った内容ではないんですが、忘れないように書いておきます。
最初は、PCで見れればスマホでなんか見れなくてもいいやと思って、このサイトを作り始めましたが、実際のところ、スマホで見られる方の率は高く、慌ててMedia Queriesを使って、大雑把ではありますけど、レスポンシブルにしやした。
その上、表示領域みたいなもんなんすけど、viewportなんていう、スマホでのページ表示独特の概念まで出てきやす。そのスマホも、iPhoneとAndroid、さらにバージョンによる違い、縦で見る場合と横で見る場合、拡大縮小と、機械音痴の僕としては、それらを把握して考えるだけで萎えてきます。(^^;
結局、それぞれのデバイスの特性を読み始めたものの、嫌になって、viewport設定は、デバイスごとにサイズを切り替えて、拡大は出来るけど、縮小はできないという無難な設定にしてみました。
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
googleのページもこの設定を使ってるから、きっと、大きな間違いはないだろう・・・。(^^;
そして、もう一つ、これは、iPhoneとPC版Safariに限った事なんですけど、iPhoneは、縦から横にすると、文字の大きさが自動調整されて大きくなるようです。僕はiPhoneを持ってないので、確認はしてませんけど・・・。(^^;
この自動調整を行っているのが、-webkit-text-size-adjustで、プロパティーのデフォルト値がauto（自動調整）になっており、これをnoneもしくは100%にすると、自動調整がオフになるようです。横にした時も同じ文字の大きさにする為には、noneもしくは100%を選ばないといけないって事です。
ところが、noneを選ぶと、PC版Safariで200%とか拡大表示にすると、他は拡大されるのに、文字だけ拡大されないという問題が生じるようで、100%を選ばないといけないってことらしいです。
ということで、body要素に、以下のように指定してみました。
body｛-webkit-text-size-adjust: 100%;}
