画面サイズ絶対固定

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

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

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

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

```javascript
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()の説明をしていきます。
まず、こいつは初回読み込み時とリサイズイベントが発生したタイミングで発火します。

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

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


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

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

```javascript
        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を指定しましょう。

```javascript
    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でしたが、任意のサイズで固定したい場合はこの数値を変えてやってください。