以跨浏览器的方式查找视口的确切高度和宽度（无原型/ jQuery）

小编典典

以跨浏览器的方式查找视口的确切高度和宽度（无原型/ jQuery）

javascript

我正在尝试找到浏览器视口的确切高度和宽度，但是我怀疑Mozilla或IE给我的号码不正确。这是我的身高方法：

var viewportHeight = window.innerHeight || 
                     document.documentElement.clientHeight || 
                     document.body.clientHeight;

我还没有开始做宽度，但是我猜它将会是类似的东西。

有没有更正确的方式来获取此信息？理想情况下，我希望该解决方案也能与Safari / Chrome /其他浏览器一起使用。

阅读 272

2020-05-01

共1个答案

小编典典

您可以尝试以下方法：

function getViewport() {

 var viewPortWidth;
 var viewPortHeight;

 // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
 if (typeof window.innerWidth != 'undefined') {
   viewPortWidth = window.innerWidth,
   viewPortHeight = window.innerHeight
 }

// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
 else if (typeof document.documentElement != 'undefined'
 && typeof document.documentElement.clientWidth !=
 'undefined' && document.documentElement.clientWidth != 0) {
    viewPortWidth = document.documentElement.clientWidth,
    viewPortHeight = document.documentElement.clientHeight
 }

 // older versions of IE
 else {
   viewPortWidth = document.getElementsByTagName('body')[0].clientWidth,
   viewPortHeight = document.getElementsByTagName('body')[0].clientHeight
 }
 return [viewPortWidth, viewPortHeight];
}

但是，甚至不可能在所有浏览器中都获得视口信息（例如，古怪模式下的IE6）。但是上面的脚本应该做得很好:-)

2020-05-01