实时检测浏览器大小 - jQuery/JavaScript [英] Live Detect Browser Size - jQuery / JavaScript

问题描述

是否有 jQuery 插件或使用直接 JavaScript 来检测浏览器大小的方法.

Is there a jQuery plugin or a way using straight JavaScript to detect browser size.

我更希望结果是实时"的，因此如果宽度或高度发生变化，结果也会发生变化.

I'd prefer it is the results were 'live', so if the width or height changes, so would the results.

推荐答案

JavaScript

function jsUpdateSize(){
    // Get the dimensions of the viewport
    var width = window.innerWidth ||
                document.documentElement.clientWidth ||
                document.body.clientWidth;
    var height = window.innerHeight ||
                 document.documentElement.clientHeight ||
                 document.body.clientHeight;

    document.getElementById('jsWidth').innerHTML = width;  // Display the width
    document.getElementById('jsHeight').innerHTML = height;// Display the height
};
window.onload = jsUpdateSize;       // When the page first loads
window.onresize = jsUpdateSize;     // When the browser changes size

jQuery

function jqUpdateSize(){
    // Get the dimensions of the viewport
    var width = $(window).width();
    var height = $(window).height();

    $('#jqWidth').html(width);      // Display the width
    $('#jqHeight').html(height);    // Display the height
};
$(document).ready(jqUpdateSize);    // When the page first loads
$(window).resize(jqUpdateSize);     // When the browser changes size

jsfiddle 演示

更新了 JavaScript 代码以支持 IE8 及更早版本.

Updated the JavaScript code to support IE8 and earlier.

这篇关于实时检测浏览器大小 - jQuery/JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！