Как получить ширину браузера с помощью кода JavaScript?

Я пытаюсь написать функцию JavaScript, чтобы получить текущую ширину браузера.

Я нашел это:

javascript:alert(document.body.offsetWidth);

Но его проблема в том, что он терпит неудачу, если тело имеет ширину 100%.

Есть ли другая лучшая функция или обходной путь?

Ответы

Ответ 1

Это aa боль в попке. Я рекомендую пропустить бессмыслицу и использовать jQuery, что позволяет просто сделать $(window).width().

Ответ 2

Обновление за 2017 год

Мой первоначальный ответ был написан в 2009 году. Хотя он все еще работает, я хотел бы его обновить в 2017 году. Браузеры могут по-прежнему вести себя по-другому. Я доверяю команде jQuery, чтобы сделать отличную работу по поддержанию согласованности между браузерами. Однако нет необходимости включать всю библиотеку. В источнике jQuery соответствующая часть найдена на строке 37 размерности .js. Здесь он извлекается и модифицируется для автономной работы:

function getWidth() {
  return Math.max(
    document.body.scrollWidth,
    document.documentElement.scrollWidth,
    document.body.offsetWidth,
    document.documentElement.offsetWidth,
    document.documentElement.clientWidth
  );
}

function getHeight() {
  return Math.max(
    document.body.scrollHeight,
    document.documentElement.scrollHeight,
    document.body.offsetHeight,
    document.documentElement.offsetHeight,
    document.documentElement.clientHeight
  );
}

console.log('Width:  ' +  getWidth() );
console.log('Height: ' + getHeight() );

Ответ 3

var w = window.innerWidth;
var h = window.innerHeight;
var ow = window.outerWidth; //including toolbars and status bar etc.
var oh = window.outerHeight;

Оба возвращают целые числа и не требуют jQuery. Совместимость с несколькими браузерами.

Я часто нахожу, что jQuery возвращает недопустимые значения для width() и height()

Ответ 4

Почему никто не упоминает matchMedia?

if (window.matchMedia("(min-width: 400px)").matches) {
  /* the viewport is at least 400 pixels wide */
} else {
  /* the viewport is less than 400 pixels wide */
}

Не так много тестировал, но тестировал с браузерами android по умолчанию и Android, хром-хром, пока все выглядит хорошо.

Конечно, он не возвращает числовое значение, но возвращает boolean - если совпадение или нет, то может не соответствовать именно этому вопросу, но то, что мы хотим, и, возможно, автор вопроса хочет.

Ответ 5

Из W3schools и его кросс-браузер обратно в темные времена IE!

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

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

var x = document.getElementById("demo");
x.innerHTML = "Browser inner window width: " + w + ", height: " + h + ".";

alert("Browser inner window width: " + w + ", height: " + h + ".");

</script>

</body>
</html>

Ответ 6

Ниже приведена более короткая версия приведенной выше функции:

function getWidth() {
    if (self.innerWidth) {
       return self.innerWidth;
    }
    else if (document.documentElement && document.documentElement.clientHeight){
        return document.documentElement.clientWidth;
    }
    else if (document.body) {
        return document.body.clientWidth;
    }
    return 0;
}