androidブラウザで文字サイズが変わってしまう場合の対処法CSS

2015.11.3 CSS

Androidブラウザで非レスポンシブのWebサイトをみたとき、文字のサイズが、コンテンツの横幅に応じて変わってしまうこと、ないですか?

tableタグの中身はとても小さいけど、その周りのタグの中身は文字が大きい…bodyにfont-sizeを指定しているのに…

実はこれだけでいいんです!ではさっそく結論から参ります!

Androidブラウザの文字サイズが変わってしまう場合は
viewportとmax-heightで解決!

head内に

<meta name="viewport" content="width=1000 user-scalable=yes">

width=の箇所は、適宜調節してください。

で、CSSには

* {max-height:999999px}

を指定してください。

これで文字サイズが統一されるはずです。
非レスポンシブのページをコーディングする際に、ぜひ。

でわ!

プロフィール

東京でWebデザイナー・コーダーとして、フロントエンド的なことからデザイン思考的なことを考えたりして、ごにょごにょと活動中。(ポートフォリオ)Webクリエイターでは珍しい(?) HIPHOP, R&B好き。休日はよくカフェや漫画喫茶に出向いたりパン屋に行ったりコーヒ豆買いに行ったり、主に散歩しています。。デザインのトレンドやデザイン思考、HTML、CSSからSASS、Javascript、Wordpress構築などコーディングのTIPSなどをブログにアップしていきます。その他のことはtwitter( @satohmsys )まで。コーヒー友達募集中。