web-dev-qa-db-ja.com

内側の幅が特定の値になるようにブラウザウィンドウのサイズを変更するにはどうすればよいですか

ウィンドウのサイズを変更することが悪い考えであり、不快であり、チョークボード上の釘と同等のウェブである理由を教えてくれるなら、立ち去ってください。講義ではなく解決策を探しています。これは、イントラネット設定でのみ使用されます。具体的には、レスポンシブデザインのWebサイト（メディアクエリを使用してスケーリングするサイト）をデバッグしてから、Web会議を介したレビューのためにクライアントにデモします。特定のブレークポイントをデモしたいと思います。これは一般の人々に解き放たれるべきではありません。

私がすでに知っていること：

  1. ユーザーがではなく、JavaScriptを介して開いたウィンドウのサイズ変更と配置のみが可能です。 （セキュリティ設定を調整しない限り、これはオプションではありません）
  2. ウィンドウのresizeTo（）メソッドを使用すると、ブラウザーは指定されたサイズにサイズ変更されます。多くの場合、ビューポートは大幅に小さくなります（平均で30〜100ピクセル小さいなど）。ただし、ビューポートのサイズを特定のサイズに変更したいと思います。
  3. ブラウザ、ブラウザのバージョン、プラットフォーム、一部のプラグイン、およびさまざまなメニューとツールバーによって、ビューポートのサイズが変更されます。メニューとツールバーが多いほど、ビューポートの幅が狭くなります。

考えられる解決策：

  1. ブラウザの幅と高さを見つける
  2. ビューポートの幅と高さを見つける
  3. 2つの違いを判断します。
  4. それに応じてresizeTo（）の呼び出しの値を調整します

ステップ1で助けが必要です。私が理解できる他のすべて。それが助けになるなら、私はjQueryとmodernizerも使っています。

よろしくお願いします！

javascriptbrowserpopupresize
20
mrbinky3000

投稿はかなり古いですが、これは将来の読者のための具体的な実装です：

var resizeViewPort = function(width, height) {
    if (window.outerWidth) {
        window.resizeTo(
            width + (window.outerWidth - window.innerWidth),
            height + (window.outerHeight - window.innerHeight)
        );
    } else {
        window.resizeTo(500, 500);
        window.resizeTo(
            width + (500 - document.body.offsetWidth),
            height + (500 - document.body.offsetHeight)
        );
    }
};

そして、スクロールバーを考慮に入れたい場合：

var resizeViewPort = function(width, height) {
    var tmp = document.documentElement.style.overflow;
    document.documentElement.style.overflow = "scroll";

    if (window.outerWidth) {
        window.resizeTo(
            width + (window.outerWidth - document.documentElement.clientWidth),
            height + (window.outerHeight - document.documentElement.clientHeight)
        );
    } else {
        window.resizeTo(500, 500);
        window.resizeTo(
            width + (500 - document.documentElement.clientWidth),
            height + (500 - document.documentElement.clientHeight)
        );
    }

    document.documentElement.style.overflow = tmp;
};

楽しんで...

21
Bob G