画面サイズ絶対固定

画面サイズの絶対固定

あんまりケースとしてはないとは思いますが、
ある案件でサイネージを作る必要があり、そこでどんな画面サイズでも1920x1080を維持して欲しいと言われました。

最初からそれを想定して作っていればよかったんですが、
このたびすでに相当量の実装をしてしまっていたため、HTMLやCSSを書き直すのはハード過ぎる……と思い、
すごい単純に画面サイズを固定してやりました。その方法です。

<div class="wrap">
    <!-- 固定したいHTML -->
</div>

.wrap {
	height: 1080px;
	width: 1920px;
	position: absolute;
	transform-origin: 0% 0%;
}

document.addEventListener('DOMContentLoaded', function () {
    const resizeFix = function () {
        const checkHeight = window.innerWidth / 1920 * 1080;
        const marginTop = window.innerHeight - checkHeight;
        const checkWidth = window.innerHeight / 1080 * 1920;
        const marginLeft = window.innerWidth - checkWidth;

        if (checkHeight > window.innerHeight) { //
            document.getElementsByClassName('wrap')[0].style.transform = 'scale(' + window.innerHeight / 1080 + ')';
            document.getElementsByClassName('wrap')[0].style.marginLeft = marginLeft / 2 + 'px';
            document.getElementsByClassName('wrap')[0].style.marginTop = 0 + 'px';
        } else {
            document.getElementsByClassName('wrap')[0].style.transform = 'scale(' + window.innerWidth / 1920 + ')';
            document.getElementsByClassName('wrap')[0].style.marginLeft = 0 + 'px';
            document.getElementsByClassName('wrap')[0].style.marginTop = marginTop / 2 + 'px';
        }
    }

    resizeFix();

    window.addEventListener('resize', function () {
        resizeFix();
    });
});

resizeFix()の説明をしていきます。
まず、こいつは初回読み込み時とリサイズイベントが発生したタイミングで発火します。

    window.addEventListener('resize', function () {
        resizeFix();
    });

機能としては単純で、コンテンツをまるっと包んでいるwrap要素をCSSのtransformで調整します。
widthやheightで画面サイズを変えようとすると中の要素にも影響を及ぼすのですが、
transformでやってしまえば基本的にその問題はありません。

const resizeFix = function () {
        const checkHeight = window.innerWidth / 1920 * 1080;
        const checkWidth = window.innerHeight / 1080 * 1920;

ここでWindowSizeに対する16:9の高さ/横幅を求め（checkHeight / checkWidth)、

        if (checkHeight > window.innerHeight) { //
            document.getElementsByClassName('wrap')[0].style.transform 
                ='scale(' + window.innerHeight / 1080 + ')';
        } else {
            document.getElementsByClassName('wrap')[0].style.transform 
                ='scale(' + window.innerWidth / 1920 + ')';
        }

もし画面の高さが先ほど求めた16:9の高さを超えていたら、
scale(window.innerHeight / 1080 )　高さの比率をあてがい、
もし画面の幅が先ほど求めた16:9の幅を超えていたら、
scale(window.innerWidth / 1920 )　幅の比率をあてがってやります。

（scaleは比率指定のため）

すると、画面幅に応じてwrap内のコンテンツが拡大・縮小するようになります。

しかしこれだけだと中央に表示されないので、天地中央に表示させるためにmarginを指定しましょう。

    const resizeFix = function () {
        const checkHeight = window.innerWidth / 1920 * 1080;
        const checkWidth = window.innerHeight / 1080 * 1920;
        const marginTop = window.innerHeight - checkHeight;
        const marginLeft = window.innerWidth - checkWidth;

        if (checkHeight > window.innerHeight) { //
            document.getElementsByClassName('wrap')[0].style.marginLeft = marginLeft / 2 + 'px';
            document.getElementsByClassName('wrap')[0].style.marginTop = 0 + 'px';
        } else {
            document.getElementsByClassName('wrap')[0].style.marginLeft = 0 + 'px';
            document.getElementsByClassName('wrap')[0].style.marginTop = marginTop / 2 + 'px';
        }
    }

これもまた上記のscaleと同じ分岐内で処理を行います。

今回はすでにコンテンツのサイズが固定で決まっているので、
const marginTop, const marginLeftはそれぞれ
画面幅 / 高さからcheckHeight / checkWidth（コンテンツの16:9の高さ / 幅）を
引いて求められるマージンが入ります。

それらのマージンを2で割った値がcssのmarginTopとmarginLeftになります。

基本的にはこれらの対応で、画面サイズの絶対固定ができるはずです。
また、今回は1920:1080でしたが、任意のサイズで固定したい場合はこの数値を変えてやってください。