如果未在Chrome，Firefox或Safari上指定DOCTYPE，是否可以找到視口的高度？

Question

下面的代碼可以使用純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

Answer 1

這是一個通用JS，適用於大多數瀏覽器（FF，Cr，IE6 +）：

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;
}

參考：參考鏈接

Answer 2

獲取視口高度：

console.log(window.innerHeight);

演示

參考

經過古怪的Chrome和Firefox測試。

旁注： jQuery不支持quirks模式。 在古怪的頁面上使用jQuery（未指定文檔類型）可能會產生意外結果。 它沒有在怪癖模式下進行測試，如果它破裂了，您將不會獲得任何支持。

Answer 3

我最近在開發一個無法控制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;

我們都可以感謝安迪·蘭斯頓（Andy Langston），無論他是誰（;

如果未在Chrome，Firefox或Safari上指定DOCTYPE，是否可以找到視口的高度？

問題描述

3 個解決方案

解決方案1
3 2015-10-26 13:59:35

解決方案2
0 2013-08-17 01:05:21

解決方案3
0 2014-06-10 23:27:21

如果未在Chrome，Firefox或Safari上指定DOCTYPE，是否可以找到視口的高度？

問題描述

3 個解決方案

解決方案1 3 2015-10-26 13:59:35

解決方案2 0 2013-08-17 01:05:21

解決方案3 0 2014-06-10 23:27:21

解決方案1
3 2015-10-26 13:59:35

解決方案2
0 2013-08-17 01:05:21

解決方案3
0 2014-06-10 23:27:21