web-dev-qa-db-ja.com

ブラウザのウィンドウ最小化の最小サイズ制限を設定しますか？

すべてのブラウザーでブラウザーウィンドウの最小サイズを手動で設定する方法はありますか？

javascripthtmlcssbrowsercross-browser
13
Human Being

あなたが試すことができます

body {  min-width:600px; }

ビューポートが600px未満になると、水平スクロールバーが表示されます。これは、min-width CSSプロパティをサポートする最新のブラウザーでのみ機能します。

ユーザーのサイズ変更を制限することは不可能だと思うので、そうすべきではありません！

21
Gurpreet Singh

タブ付きバウザーでは他のタブを含むウィンドウのサイズを再定義できないため、ほとんどの場合、Javascriptを使用して問題のウィンドウを作成する必要があります。それでも、一部のブラウザではこれを実行できません。

window.open 、次を指定することにより、サイズ640 * 480の特定のウィンドウを作成できます。

window.open('http://www.your.url/','yourWindowsName','width=640,height=480');

ウィンドウ内では、次のようなresizeToイベントハンドラーによってトリガーされた resize 高さと幅を試すことができます。

function resizeToMinimum(){
  var minimum    = [640, 480];
  var current    = [window.outerWidth, window.outerHeight];
  var restricted = [];
  var i          = 2;

  while(i-- > 0){
    restricted[i] = minimum[i] > current[i] ? minimum[i] : current[i];
  }

  window.resizeTo(current[0], current[1]);
}

window.addEventListener('resize', resizeToMinimum, false)

上記の両方の動作は議論の余地があり、説明していることはユーザーがブラウザを適切に使用する自由を事実上制限していることを考慮する必要があります。そのため、これがどこでも機能するとは思わないでしょうが、機能する場所では、これが可能になるコードです。

23
Barney
function resizeToMinimum(w,h){
    w=w>window.outerWidth?w:window.outerWidth;
    h=h>window.outerHeight?h:window.outerHeight;
    window.resizeTo(w, h);
};
window.addEventListener('resize', function(){resizeToMinimum(100,100)}, false)
1
Tito100

これは、実際の最小コンテンツの幅と高さを確保するための私のソリューションです。これには、さまざまなブラウザーの「クロム」寸法の処理が含まれます。これはFirefoxでは機能しませんが、EdgeとChromeでテストしました。

function ensureMinimumWindowSize(width, height) {
    var tooThin = (width > window.innerWidth);
    var tooShort = (height > window.innerHeight);

    if (tooThin || tooShort) {
        var deltaWidth = window.outerWidth - window.innerWidth;
        var deltaHeight = window.outerHeight - window.innerHeight;

        width = tooThin ? width + deltaWidth : window.outerWidth;
        height = tooShort ? height + deltaHeight : window.outerHeight;

        // Edge not reporting window outer size correctly
        if (/Edge/i.test(navigator.userAgent)) {
            width -= 16;
            height -= 8;
        }

        window.resizeTo(width, height);
    }
}

var resizeTimer;
window.addEventListener('resize', function(event) {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function () {
        ensureMinimumWindowSize(<width>,<height>);
    }, 250);
}, false);
0
Gabriël Wolmarans