スマホの文字サイズでHTMLのフォントに影響される

2015年07月23日 · スマートフォン

この現象は端末依存とOSのバージョンにより再現されるされない問題があります。

まず、スマホの文字サイズを「特大」に変更している状態で試す必要があります。
私が持つ端末では、
この現象は通常のブラウザーでは現象はでなかったです。
アプリに埋め込まれたWebViewで表示したHTMLだとそのような動作がでることがわかりました。

その状態をもう少し詳しく見ていきましょう

スマホのサイズ設定方法

スマホに文字サイズを指定することができるのはご存知でしょうか？
「設定」➡「画面設定」又は「ディスプレイ」➡「フォントサイズ」
このフォントサイズをタップすると
小、中、大、特大の４つから選べるものが多い様です。
Screenshot_2015-07-23-01-09-35_
※端末により異なる場合があります。

確認する環境

フォントサイズで変更があった端末：SO-02G
SO-02Gで今回は検証をおこないました。
結果が端末とOSよっては内容が変わる可能性があります。

確認する仕組みとしては
１：htmlにフォントサイズと表示しする

<div class="wrapper">
	<p class="MT_10">フォントサイズ</p>
</div>
<p id="data"></p>

２：cssでフォントサイズを13pxと指定

.wrapper p {
	font-size: 13px;
}

３：jQueryでpタグのフォントサイズを取得し、ID「data」にサイズを書込む

var fontsize = $('.wrapper p').css('font-size');
$("#data").html(fontsize);

上記のHTMLを用意し、AndroidアプリのWebViewでアクセスして確認できるようにしました。

確認結果

■フォントサイズ：小
フォントサイズと11pxと表示
Screenshot_2015-07-23-01-11-11_

■フォントサイズ：中
フォントサイズと13pxと表示
Screenshot_2015-07-23-01-11-43_
中がcssで指定した結果と同じだったので、標準サイズといったところでしょうか

■フォントサイズ：大
フォントサイズと15pxと表示
Screenshot_2015-07-23-01-13-08_

■フォントサイズ：特大
フォントサイズと17pxと表示
Screenshot_2015-07-23-01-12-46_

それぞれ、フォントサイズを変更してみた結果、2pxずつ大きさが変わっていることがわかった。
※端末とOSによりサイズ感が違う可能性があります

さらにフォントも変更できる端末もあるので、もしかしたら影響もあるかもしれない
今回の調査でアプリ内でのHTMLではフォントサイズ変更でHTMLのフォントにも影響されることがわかった！
対応としては、
・サイズ変更でも影響ないようなデザインにする
・画像にしてしまう
・スクリプトでサイズを取得することができるので、スクリプトで処理をおこなう
という処理ができそうです。

アプリ内のHTMLを作っている皆さんお気をつけてください。