22

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

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

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

考えられる解決策：

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

ステップ1で助けが必要です。私が理解できる他のすべて。それが役立つ場合は、jQueryとmodernizerも使用しています。

よろしくお願いします！

4

1 に答える 1

26

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

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;
};

楽しむ...

于 2013-03-08T14:41:50.103 に答える