« メモ:パッケージの解析中に問題が発生しました | トップページ | ◆蝶と蛾;科学と文化バイアス »

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は1行に45文字程度入れることを想定したものです。 どのくらいが適切かは検討する必要があります。
12との比較は最低文字サイズを定めています。

どうやらAndroidスマホのChromeでは文字サイズが指定したemの2倍となるようです。
ブロックや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 高度計] のオンライン説明用のものです。

書きかけのものを置いてあります。

Gps-MAP高度計マニュアル

|

« メモ:パッケージの解析中に問題が発生しました | トップページ | ◆蝶と蛾;科学と文化バイアス »

トラックバック


この記事へのトラックバック一覧です: HTML文字サイズをウィンドウ幅に応じて変更する:

« メモ:パッケージの解析中に問題が発生しました | トップページ | ◆蝶と蛾;科学と文化バイアス »