画面幅に応じて文字サイズを変えるデジタル時計アプリ

デジタル時計で画面幅に応じて文字サイズを変えるには、表示されている画面（ウィンドウ）の幅から文字サイズを計算します。サンプルではwindow.innerWidth / 10として文字サイズを計算しています。計算した文字サイズは時刻を表示する要素のスタイルシートプロパティであるfontSizeに入れます。その際、単位付きで指定します。単位はpx（ピクセル）でなくpt（ポイント）で指定します。
【サンプルをブラウザで実行】【サンプルをダウンロードしてインストール(.apk)】
●HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>デジタル時計</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div id="container">
<div id="clock"></div>
</div>
<script src="js/main.js"></script>
</body>
</html>
●スタイルシート（main.css）
html{
display:table;
}
body{
display:table-cell;
vertical-align:middle;
}
html, body{
height:100%;
width:100%;
}
#clock {
font-size: 12pt;
text-align: center;
}
●スクリプト（main.js）
setInterval(function(){
// 時計を表示する要素を変数clockEleに入れる
var clockEle = document.getElementById("clock");
// 表示倍率を求める
var scale = window.innerWidth / 10;
// 時計表示の文字サイズを設定
clockEle.style.fontSize = scale+"pt";
// 現在時刻を取得して表示する
var currentTime = new Date();
var h = ("0"+currentTime.getHours()).slice(-2);
var m = ("0"+currentTime.getMinutes()).slice(-2);
var s = ("0"+currentTime.getSeconds()).slice(-2);
clockEle.innerText = h+":"+m+":"+s;
}, 1000);
●実行結果（Android 2.3/Galaxy SII）
実行結果
実行結果
●実行結果（Android 4.2/Nexus 7）
実行結果
実行結果

【メニューに戻る】