Если DOCTYPE не указан в Chrome, Firefox или Safari, есть ли способ узнать высоту области просмотра?

Следующий код может правильно найти высоту области просмотра, используя обычный 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
Источник

3 ответа

Вот общий 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;
}

Ссылка: Ссылка ссылка

Источник

Недавно я столкнулся с этой проблемой при разработке букмарклета, в котором я не мог контролировать, присутствует ли DOCTYPE. В конце концов я нашел этот пост, который сделал мою жизнь намного проще!

Вот простая функция javascript only для определения размеров окна просмотра / окна:

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;

Мы все можем поблагодарить Энди Лэнгстона, кем бы он ни был (;

Источник

Чтобы получить высоту окна просмотра:

console.log(window.innerHeight);

демонстрация

Испытано в необычных Chrome и Firefox.

Примечание: jQuery не поддерживает режим причуд. Использование jQuery на причудливой странице (без указания типа документа) может привести к неожиданному результату. Он не тестируется в режиме причуд, и если он когда-нибудь сломается, вы не получите никакой поддержки.

Источник
Другие вопросы по тегам