HTML文字サイズをウィンドウ幅に応じて変更する
文字サイズをウィンドウの幅に連動させる
HTMLの文字幅はデフォルトのままでは一定のレイアウトを保つことはできません。
画面の幅に応じて文字サイズを変更するには次のような形でbodyのfontSize属性を変更します。
<head> ... <style type="text/css"> h1{ font-size:2em; } h2{ font-size:1.8em;margin-top:1em;margin-bottom:-0.4em;} h3{ font-size:1.5em;margin-top:1em;margin-bottom:-0.4em;} h4{ font-size:1.3em;margin-top:1em;margin-bottom:-0.6em;} p { font-size:1em;} a { font-size:1em;} ul{ font-size:1em;} </style> </head> <body> ... </body> <script> window.onresize = function(){setFontSize();}; function setFontSize(){ _p=Math.floor(window.innerWidth/45);// 文字幅の計算 if( _p>=12 ) document.body.style.fontSize=_p+"px";//設定 } setFontSize(); </script>
bodyのfontSizeは'em'の実サイズとなります。
この例ではh1～ulのサイズは'em'で定義してあるため画面サイズに連動することになります。
ここで45は１行に45文字程度入れることを想定したものです。
どのくらいが適切かは検討する必要があります。
12との比較は最低文字サイズを定めています。
どうやらAndroidスマホのChromeでは文字サイズが指定したemの２倍となるようです。
ブロックやimgのwidthにemを指定した場合はそのサイズになります。
困ったもんだ。解決法は未発見
h2～h4のmargin-xxxは見出しとして成り立つよう、上を少し開け、下が空きすぎないようにしています。
(デフォルトのh2～h4は余りにも見づら過ぎると思っています)
最終行でのsetFontSize()呼び出しは、htmlロード完了で最初の設定を行うものです。
onloadなどのイベント設定はブラウザによる差が大きいためこのようにしています。
画像と文字の連携
タグ毎の文字サイズを自分で指定してある場合、そのサイズの画像と文字を並べることができます。
この例では<P>の文字サイズは1emとしていますので、
<p> 裏で計測中は通知 <img src="./notif.png" style="width:1.2em;vertical-align: middle"> が表示されます。 </p>といった記述で次のような表示を得ることができます。
実は
この記述法はAndroidアプリ Google Play [GPS MAP 高度計] のオンライン説明用のものです。
書きかけのものを置いてあります。
| 固定リンク