| 解 説 |
ウィンドウサイズに応じて表示されている文字サイズを変えるにはページ構築後のonLoadイベントとウィンドウサイズを変えた場合のonResizeイベント発生時に文字サイズを変更する関数を呼び出します。ウィンドウサイズを取得し表示する文字サイズを求めます。ページ全体の文字サイズはdocument.body.style.fontSizeに文字サイズを指定することで変更することができます。
|
| コード |
<![CDATA[
<html>
<head>
<title>ウィンドウサイズに応じて表示されている文字サイズを変える</title>
<script language="JavaScript"><!--
function setTextSize()
{
w = document.body.clientWidth;
h = document.body.clientHeight;
if (w > h) w = h; // 狭い方を基準とする
document.body.style.fontSize = w / 20;
}
// --></script>
</head>
<body onLoad="setTextSize()" onResize="setTextSize()">
ウィンドウ内に表示されている文字が<br>
ウィンドウ幅に合わせてサイズが変わります。
</body>
</html>
]]>
|
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View! |
ウィンドウサイズに応じて表示されている文字サイズを変える