エンジニアの卵_level1

【毎日更新!】新卒2年目エンジニアブログです! プログラムだけじゃなく、マネジメントとかも書いていきたい!

【CSS】スマホを横向きにした時に、文字が勝手に大きくなる問題【136日目】

CSSをpx指定してもできない

.text {
    font-size: 14px;
}

.text2 {
    font-size: 14px;
}

スマホを横向きにした瞬間文字が大きくなる・・・なぜ。

かと思えばtext2に至っては小さくなってる・・・どゆことなの。

対策

html {
    -moz-text-size-adjust:100%;
    -webkit-text-size-adjust:100%;
    -ms-text-size-adjust:100%;
}

-mozや、-webkitとかは、firefoxとかiphonesafariとかブラウザ毎の対応です。

どういうことなの

iphonesafariとか、ブラウザが自動的に文字サイズを変えちゃうみたい。

モバイル対応してないサイトとかを、そのまま表示したら見にくいだろうって気遣いみたい。

なので、CSSでhtml部分の設定を書き換えようってお話。

参照元

日本語記事

developer.mozilla.org

元記事

developer.mozilla.org