フロントエンド開発Blog

オレには鈍器がある

JavaScript , UI , 画面サイズ

地味に厄介な全画面サイズ取得。ほぼ全ての端末に対応しようとすると

それぞれの画面サイズの違い
JavaScriptの解釈の違い
果てはコンテンツの幅

などなど、考慮すべき事が意外と多いと思います。
※特にレスポンシブWEBデザイン適用のサイトや、PC・タブレット兼用サイトの場合
 ピンチイン・ピンチアウトを考慮する必要もあるため、画面サイズに合わせてfixedという手法が使えないことも
 あるかと思います。
※それからうろ覚え(その時意識がもうろうとしてましたw)ですがfixedで機種依存系のバグにぶち当たった?ような。。

http://jsdo.it/oredon/3IAx

function calcW(){
var max_width = Math.max.apply( null, [
document.body.clientWidth,
document.body.scrollWidth,
document.documentElement.scrollWidth,
document.documentElement.clientWidth
]);
return max_width;
}
function calcH(){
var max_height = Math.max.apply( null, [
document.body.clientHeight,
document.body.scrollHeight,
document.documentElement.scrollHeight,
document.documentElement.clientHeight
]);
return max_height;
}

これ以外のご自身の実装で問題無いときは良いのですが、
機種依存にやられて全画面サイズの取得が上手くいかない!
モーダルライブラリがレスポンシブ対応してない!
といった時にこのコードを思い出していただければ幸いです。

ページトップへ

関連ページ

ページトップへ