Q&A###[√] フォントサイズが指定通りにならない問題
Webページを作っていて、記事本体に基準のフォントサイズを指定し、
見出しや文章にemでフォントサイズを指定しています。
PCではうまくできているのですが、スマホでは表示が変です。
一体どのあたりを見直せばよいのでしょうか？
経緯
0. WebページをPCで作成
0. うまくいってることを確認
0. スマホにフォルダごとコピー
0. スマホのブラウザで見る。
0. 見た目がPCと違うことに気付く
フォントサイズの指定方法（説明用にセレクタは簡略化）
css
1article{ font-size: 17px; } /*記事全体を囲む要素に基準のフォントサイズを指定*/ 2 h1{ font-size: 2em; } /*「おすすめ映画ベスト10」の部分に基準の2倍のサイズ*/ 3 h2{ font-size: 1.8em; } /*「第10位『LIFE』」の部分に基準の1.8倍のサイズ*/ 4 p{ font-size: 1em; } /*本文に基準の1倍のサイズ*/ 5 6@media screen and (max-width:80vh) { /*スマホ表示（横÷縦が0.8以下で適用）*/ 7 article{ font-size:24px; } /*基準のサイズを24pxに変更*/ 8 }
###[√] PCで見たとき（フォントサイズの指定が効いている）
横長にしたとき
縦長にしたとき
※画像にぼかしが入っているのは制作中のサイトが友人のものだからです。
###[√] スマホで見たとき（フォントサイズがおかしい）
左：Chrome（全部同じフォントサイズ。何故だ！）
右：Firefox（サイズ比はいいけど、なんか小さい。）
使用スマホはAndroid(Kitkat)，ブラウザは最新版
###...ご覧の有り様です。
スマホでもうまく表示できるようにしたいです。(><)
回答1件
0
自己解決
###自己解決
html
1<!--略--> 2<head> 3 <!--略--> 4 <meta name="viewport" content="width=device-width, initial-scale=1.0 " ><!--これが抜けてた--> 5</head> 6<!--略-->
と
css
1/*略*/ 2body{-webkit-text-size-adjust:100%;} 3/*略*/
の追加で解決しました
投稿2016/12/08 15:01
総合スコア71
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。