Question

在用户调整窗口大小后，有没有办法获取浏览器的宽度和高度。例如，如果窗口是1920×1080并且用户将窗口更改为500乘500，那么有没有办法在JavaScript或jquery中获取这两个新值？

Answer 1

纯Javascript答案：

var onresize = function() {
   //your code here
   //this is just an example
   width = document.body.clientWidth;
   height = document.body.clientHeight;
}
window.addEventListener("resize", onresize);

这适用于chrome。但是，它仅适用于chrome。稍微跨浏览器的示例是使用事件目标属性“outerWidth”和“outerHeight”，因为在这种情况下，事件“target”是窗口本身。代码就像这样

var onresize = function(e) {
   //note i need to pass the event as an argument to the function
   width = e.target.outerWidth;
   height = e.target.outerHeight;
}
window.addEventListener("resize", onresize);

这在firefox和chrome

中工作正常

希望有所帮助：）

编辑：在ie9中测试过，这也有效：）

Answer 2

您可以使用JQuery resize（）函数。还要确保添加相同的调整大小逻辑以重新加载事件。如果用户在大小的窗口中重新加载，则逻辑将无效。

 $(window).resize(function() {
                        $windowWidth = $(window).width();
                            $windowHeight = $(window).height();
                        });

 $(document).ready(function() {
      //same logic that you use in the resize...
  });

Answer 3

可以通过收听resize事件。

$(window).resize(function() {
  var width = $(window).width();
  var height = $(window).height();
})

Answer 4

实际上，我使用它并且它对我有很大帮助：

    var TO = false;
    var resizeEvent = 'onorientationchange' in window ? 'orientationchange' : 'resize';
    $(window).bind(resizeEvent, function() {
        TO && clearTimeout(TO);
        TO = setTimeout(resizeBody, 200);
    });
    function resizeBody(){
        var height = window.innerHeight || $(window).height();
        var width = window.innerWidth || $(window).width();
        alert(height);
        alert(width);
    }

Answer 5

使用jQuery resize方法监听窗口大小的变化。在内部回调中你可以获得高度和宽度。

$(window).resize(function(){
    var width = $(window).width();
    var height = $(window).height();

});

Answer 6

您可以使用resize事件以及height()和width()属性

$(window).resize(function(){
   var height = $(window).height();
   var width = $(window).width();
});

See some more examples here

Answer 7

如果你需要知道这些值来进行布局调整，我打赌你打算听这些值。我建议使用Window.matchmedia() API来实现此目的。

它是much more performant，基本上是JS媒体查询的JS等价物。

非常快速的使用示例：

if (window.matchMedia("(max-width: 500px)").matches) {
  /* the viewport is less than or exactly 500 pixels wide */
} else {
  /* the viewport is more than 500 pixels wide */
}

您还可以设置一个每次matches属性更改时都会调用的侦听器。

请参阅MDN了解description和example of using a listener。

Answer 8

在窗口调整大小后，获取元素实际宽度和高度的最简单方法如下：

<div id="myContainer">
    <!--Some Tages ...  -->
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    $(function () {
        $(window).resize(function () {
            //The below two lines of codes more Important to clear the previous settings to get the current measure of width and height
            $('#myContainer').css('height', 'unset');
            $('#myContainer').css('width', 'unset');

            var element = $('#myContainer');

            var height = element.height();
            var width = element.width();

            //Below two lines will includes padding but not border 
            var innerHeight = element.innerHeight();
            var innerWidth = element.innerWidth();

            //Below two lines will includes padding, border but no margin 
            var outerHeight = element.outerHeight();
            var outerWidth = element.outerWidth();

            //Below two lines will includes padding, border and margin 
            var outerHeight = element.outerHeight(true);
            var outerWidth = element.outerWidth(true);
        });
    });
</script>

Answer 9

您可以使用 event 对象获取 height 和 width，我使用解构赋值，target 指向 {{1 }}：

window

用户调整窗口大小后获取浏览器宽度和高度

9 个答案: