HTMLとCSSでWebページを書き終えてiPhoneでの表示を確認したところ、iPhoneを横にして画面を縦から横に変えると、一部の文字だけ不自然に大きくなることに気がつきました。
全体的に文字サイズが大きくなるなら我慢できるところ、部分的に大きくなってしまうので非常に見にくく、カッコ悪いです。
![縦画面では文字のサイズはどれも同じ](https://panorama360.jp/blog/wp-content/uploads/2016/04/IMG_0798-577x1024.png)
![横画面だと山名リスト部分以外の文字サイズが大きくなる](https://panorama360.jp/blog/wp-content/uploads/2016/04/IMG_0796-1024x473.png)
パンくずリストや「目次」という文字よりも重要な山名リストの方が、文字が小さくなっています。
何となくですが、<p>や<span>などのインライン要素は総じて文字サイズが大きくなるような。<h1>〜<h4>などのブロック要素ではwidthが100%だと文字サイズはそのままで、widthが小さくなるほど拡大率が増すような気がします。
調べてみると、デフォルトでは画面の幅に合わせて文字サイズを調整する設定になっているので、以下のようなCSSを記述して解除すれば良いらしい。
body {
-webkit-text-size-adjust:100%;
}
結果、以下のように不自然な文字サイズの拡大はなくなりました。
![横画面でも文字のサイズはどれも同じ](https://panorama360.jp/blog/wp-content/uploads/2016/04/IMG_0797-1024x473.png)