SQLの窓 イラストAC フリー素材

2015年07月06日

Android Chrome の 謎の(?) 241文字仕様 / 241文字以上のコンテンツは文字が大きく表示される

▼ 241 文字の場合


▼ 240 文字の場合


ソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<style>
div {
	font-weight: bold;
	font-family: "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "MS Pゴシック", sans-serif;
}
</style>
</head>

<body>
<div>ある日の事でございます。御釈迦様は極楽の蓮池のふちを、独りでぶらぶら御歩きになっていらっしゃいました。池の中に咲いている蓮の花は、みんな玉のようにまっ白で、そのまん中にある金色の蕊からは、何とも云えない好い匂が、絶間なくあたりへ溢れて居ります。極楽は丁度朝なのでございましょう。やがて御釈迦様はその池のふちに御佇みになって、水の面を蔽っている蓮の葉の間から、ふと下の容子を御覧になりました。この極楽の蓮池の下は、丁度地獄の底に当って居りますから、水晶のような水を透き徹して、三途の河</div>
</body>
</html>

どちらも同じ HTML で、文字数の違いだけで、こうなります。これは、Google Chrome の Device Mode で表示した時も同様です。実際問題、iPhone の実機では当然そうはなりませんが、Google Chrome の Device Mode 上では同じ動作をします

http://toolbox.winofsql.jp/div_ok.html
http://toolbox.winofsql.jp/div_no.html

DIV のかわりに、PRE を使用しても再現できますが、その場合は 『white-space: pre-wrap』が必要になります

これは、自動的に 241 文字以上あるコンテンツは、PC と スマホの両方で可読性が同様である事を意味します。


【Androidの最新記事】
posted by at 2015-07-06 01:16 | Android | このブログの読者になる | 更新情報をチェックする