HTMLでウィンドウサイズを固定する方法【現役エンジニアが解説】

PROGRAM

今回は、HTMLでウィンドウサイズを固定する方法について、ページ内に設定する方法とページを開く際に設定する方法に分け、簡単に解説していきます。

対象のページ内に設定

Internet Explorerの場合は開かれているページでサイズの調整が可能です。

JavaScriptのwindowのresizeToメソッドで第一引数に幅、第二引数に高さを指定します。

window.resizeTo(800,600);

上記のコードでは、Internet Explorerで開かれているページの幅を800に、高さを600にリサイズしています。

ページを開く際に設定

Internet Explorer以外のブラウザでは、ページを開く際に設定することになります。

JavaScriptのwindowのopenメソッドでページを開く際に第三引数に幅や高さ等のオプションを設定します。

<a href="javascript:void(0);" onClick="window.open('https://www.google.com/', '_blank', 'width=800,height=600,scrollbars=yes,resizable=yes');">グーグル</a>

上記のコードでは、グーグル(https://www.google.com/)を、幅800、高さ600のサイズで開くリンクを表示しています。

サイズ変更不可にする

Internet Explorerのみとなりますが、ページを開く際に、サイズ変更不可の設定を追加できます。

JavaScriptのwindowのopenメソッドを使う際に、第三引数の幅や高さの設定の他、”resizable=no”を追記します。

<a href="javascript:void(0);" onClick="window.open('https://www.google.com/', '_blank', 'width=800,height=600,scrollbars=yes,resizable=no');">グーグル</a>

上記のコードでは、Internet Explorerで、グーグル(https://www.google.com/)を、幅800、高さ600のサイズでリサイズ不可で開くリンクを表示しています。