初めに
JavaScript, HTML, CSS Webサイトを作るとした際、画面表示にはこの辺りを使うことも多いだろう。
例にもれず、これらを使用してWebサイトを作成していた。（裏側のDB処理にはJavaを使用）
ある時、「使用するモニター変わりました。デフォルト解像度も変わりました。画面変です」そんなことが起きるとも知らず。
原因
原因は簡単だった。
iframeを使用してpdfファイルを画面表示する際、iframeのサイズをcssで 固定値 で指定していたのだ。
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link href="test_css.css" rel="stylesheet" type="text/css">
<script src="jquery.min.js"></script>
<script src="test_javascript.js"></script>
</head>
<body style="height: 100%;">
<!-- メインテーブルコンテンツ -->
<div id="main" style='padding: 0%;'>
</div>
</body>
</html>
$(function() {
individual_vote = "<iframe id='main_iframe' src='test.pdf'>";
$("#main").append(individual_vote);
});
iframe#main_iframe {
width:100%;
height: 750px;
}
Javascript上では
<iframe id="main_iframe" src="test.pdf">
となり、
cssによって幅は画面いっぱい、高さは750pxの固定値でiframeが表示されることとなる。
ここで考えてほしい。
解像度が変わるということは、画面に表示される ピクセル数 が変わる、ということだ。
起こることは明白である。
1440×1080（HD）から1920×1080（FHD）に変わったのだ。
そう、 余白が沢山出来る！！！
PDF表示用のiframeの下に、画面下半分に及ぶほどの余白！！
この余白を無くし、画面いっぱいにiframeを配置し直さなくてはならない。
（ついでにHDでもFHDでも、何なら4Kでも余白無しでいい塩梅に表示出来たらうれしいな…………。）
対策
簡単だ。画面サイズを取得して、動的にhightの値を変えてやればよいのだ。
変えたのは2箇所。cssファイルとjsファイル。
まずはcssファイルから固定値で設定している場所を無くす。
body {
margin: 0;
padding: 0;
}
iframe#main_iframe {
width:100%;
- height: 750px;
}
続いてjsファイル。
画面サイズを取得し、iframeの高さに与えてやればよい。
$(function() {
- individual_vote = "<iframe id='main_iframe' src='test.pdf'>";
+ // ブラウザの高さを取得しiframeの高さに使用（可変対応）
+ frame_high=document.documentElement.clientHeight*0.8
+ individual_vote = "<iframe id='main_iframe'" + "height=" + frame_high + " src='" + book_src + "?name=" + name +"'>";
$("#main").append(individual_vote);
});
いい感じになるよう、画面全体の8割を高さとして使うことにした。
これによって、HDでもFHDでもいい塩梅に画面が表示されるようになった。
（※ただし画面を一度読み込んだ後に画面サイズを変更してもサイズが変わるわけではないことに注意。リロードすると反映される）
教訓
仕様に組み込めないのなら、画面サイズは変わるものとして作ろう。
固定値を使うなら仕様に組み込もう。