2

以下代码可以使用纯 JavaScript 或 jQuery 正确找到视口的高度，但如果DOCTYPE未指定，那么报告类似内容的两行410现在都会报告类似3016.

DOCTYPE如果未指定，有没有办法找到视口的高度？

<!DOCTYPE html>
<html>
<head>

<style>
    body { height: 3000px; }
</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>

    onload = function() {
        console.log("jQuery version", $.fn.jquery);
        console.log("document.compatMode is", document.compatMode);

        // using jQuery
        console.log("$(window).height() is", $(window).height());

        // using plain JavaScript
        console.log("document.documentElement.clientHeight is", document.documentElement.clientHeight);
    }

</script>

</head>

<body>
    hi
4

3 回答 3

3

这是一个可以在大多数浏览器（FF、Cr、IE6+）中运行的通用 JS： 

var viewportHeight;
var viewportWidth;
if (document.compatMode === 'BackCompat') {
    viewportHeight = document.body.clientHeight;
    viewportWidth = document.body.clientWidth;
} else {
    viewportHeight = document.documentElement.clientHeight;
    viewportWidth = document.documentElement.clientWidth;
}

参考： 参考链接

于 2015-10-26T13:59:35.787 回答
0

要获取视口高度：

console.log(window.innerHeight);

演示

在古怪的 Chrome 和 Firefox 中测试。

旁注：jQuery 不支持 quirks mode。在古怪的页面（没有指定文档类型）上使用 jQuery 可能会产生意想不到的结果。它没有在 quirks 模式下进行测试，如果它坏了，你将不会得到任何支持。

于 2013-08-17T01:05:21.457 回答
0

我最近在开发一个无法控制 DOCTYPE 是否存在的小书签时遇到了这个问题。最终，我发现这篇文章让我的生活变得如此轻松！

这是一个简单的仅用于确定视口/窗口大小的JavaScript函数：

function viewport(){
    var e = window, a = 'inner';
    if(!('innerWidth' in window)){
        a = 'client';
        e = document.documentElement || document.body;
    }
    return { width  : e[a+'Width'], height : e[a+'Height'] };
}

用法：

var vp = viewport(),
    h = vp.height,
    w = vp.width;

或者

var h = viewport().height,
    w = viewport().width;

我们都可以感谢安迪兰斯顿，无论他是谁（;

于 2014-06-10T23:27:21.620 回答