プラカンブログSTAFF BLOG

2018.05.30

Androidで文字がとても大きく表示されたり、明朝体がゴシック体で表示されて困った話

次の機種変更ではAndroidも視野に入れようかなと思っているOHMATAです。

Androidで文字がとても大きく表示される件

先日とあるPCサイトを制作していた時のことです。
レスポンシブではなく、スマホはviewportでpx指定があるだけでしたので、下記のように記述しました。

<meta name="viewport" content="width=固定値">

コーディングもすんなり終わり、一応スマホでもチェックしておこうとAndroidで見た時でした。
標準ブラウザで一部の文字がめちゃくちゃ大きくなっている…何故…。
-webkit-text-size-adjust: 100% も入れてるのに?何故???
変な作り方したかもしれないと思い、該当箇所を削除したり関係ない箇所を削除したり…と思いつく限り試してみたのですが、関係ない箇所を消すと大きかった文字が小さくなったり、逆に今まで普通だった文字が大きくなったり…これは私のせいではないな?という結論に至りいろいろと先人の知恵を検索しましたところ、どうやらviewポート記述にwidthを固定値で入れていると起きるそう…???
他にもjs内の特定の記述で起きるという記事も見かけました。
バグ・バグと書いてあって結局はっきりした説明がなく(バグだからそれもそうか…)これ以上の追求を諦めました。

解決法はひとつ。
親要素にmax-height: 999999pxを入れるだけ。

*{ max-height: 999999px; }

私の場合bodyに入れても直らなかったので、この記述にしたら直りました。
この9が並ぶのっていにしえのテキスト飛ばしを思い出しますよね。

明朝体がゴシック体で表示される件

別件で、明朝体(游明朝体など)で指定した場合、Androidでは明朝体が表示されませんでした。
調べると機種やバージョンによっては明朝体が入っておらず表示されないとのこと!
こちらでフォントを用意する方法もありますが、手っ取り早い解決法はGoogle Fontsを使用することです。
Google Fontsを見ると明朝体は3種類ありますが、多数の漢字に対応しているのはさわらび明朝のようなのでこちらが良いと思います。

htmlには以下の様に記述します。

<link href="https://fonts.googleapis.com/earlyaccess/sawarabimincho.css" rel="stylesheet">

後はCSSで指定するだけです。

要素名(又はクラスやID) { font-family: "Sawarabi Mincho", serif; }

私はiPhoneユーザーなのでAndroidにあまり詳しくないのですが、最近のAndroidにはChromeしか入っていないとも聞くので、みんな統一しようぜ!(※)と改めて思うのでした。
※でもiPhoneではSafariで見てる矛盾

参考サイト

+dc (大)

この記事は、OHMATA が書きました。