21

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

4

9 回答 9

27

纯 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”，因为在这种情况下，事件“目标”就是窗口本身。代码是这样的

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 中测试，这也有效:)

于 2013-04-05T18:04:24.063 回答
6

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

它的性能要好得多，基本上相当于 JS 的 CSS 媒体查询。

非常快速的使用示例：

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 。

于 2018-03-07T13:41:49.590 回答
5

通过监听resize事件是可能的。

$(window).resize(function() {
  var width = $(window).width();
  var height = $(window).height();
})
于 2013-04-05T17:54:31.973 回答
5

您可以使用 JQuery resize() 函数。还要确保添加相同的调整大小逻辑来重新加载事件。如果用户在大小窗口中重新加载，您的逻辑将不起作用。

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

 $(document).ready(function() {
      //same logic that you use in the resize...
  });
于 2013-04-05T17:56:46.890 回答
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);
    }
于 2013-04-05T18:18:11.050 回答
1

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

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

});
于 2013-04-05T17:54:32.240 回答
1

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

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

在此处查看更多示例

于 2013-04-05T17:54:39.973 回答
1

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

<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>
于 2019-07-31T20:55:38.027 回答
0

您可以使用event对象来获取高度和宽度，我使用解构赋值和target指向window：

const handleGetDim = ({ target }) => ({
  width: target.innerWidth,
  height: target.innerHeight,
});

window.addEventListener('resize', handleGetDim);
于 2021-02-13T17:39:31.317 回答