今回は、端末に対応していないサイトをスマホなどのモバイル端末で見るときの挙動とその解決法について書いていきます。
通常のwebサイト制作においては、text-sizeでinputなどの文字の大きさを決めていると思われます。
ですが、通常の状態のtext-sizeだと、下記で紹介する-webkit-text-size-adjustの効果によって縦にした時と横にした時とで文字サイズが異な
る時があり、このズレを放置することでページ全体のレイアウトが崩壊してユーザーを混乱させてしまう恐れがあります。
-webkit-text-size-adjustとは、ページに合わせたテキストの大きさを制御しているプロパティです。
通常、モバイル端末に対応していないwebサイトをスマホなどの端末で見ると、ブラウザはレイアウトを大きめの画面に合わせた状態
で表示させます。-webkit-text-size-adjustは、デフォルトの状態でauto（動いている）状態になっており、このままでは一部分の画面しか
表示してくれなかったりとユーザーにとってもものすごく見づらい画面になってしまいます。
ですが、この-webkit-text-size-adjustの値を100%にすることで使うことで上記の効果を無効化し、元の文字の大きさで表示させることが
できます。
めちゃくちゃシンプルですがこんな感じです。
</pre>
<style>
body{
-webkit-text-size-adjust
}
</style>
<pre>
端末で見られることを想定しているサイトの場合、主にbodyの中に入れてビューの変形を免れることができます。
noneでも設定できるかと思っていましたが、chromeやsafariで見ると文字の配置は変わっているのに
文字サイズだけが変わらず小さいままというとにかく扱いにくい状態になってしまうのでこれは非推奨でした。
