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

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

Я нашел это:

<code>javascript:alert(document.body.offsetWidth);
</code>

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

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

Ответы на вопрос(6)

<!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>
 14 сент. 2015 г., 19:59
Не выдаст ли ошибку, если document.documentElement не определен?
 01 апр. 2015 г., 12:08
не доверяйте W3Schools, который полон ошибок. Увидетьw3fools.com
 09 мая 2015 г., 01:07
Подход работает прекрасно и может быть принятым ответом, потому что он намного короче, чем любое другое решение (кроме использования jQuery).
var w = window.innerWidth;
var h = window.innerHeight;
var ow = window.outerWidth; //including toolbars and status bar etc.
var oh = window.outerHeight;

м.

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

 09 авг. 2017 г., 15:37
Возникли проблемы при использовании этого на Safari iphone.

Here is a shorter version of the function presented above:

    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;
}
 06 июн. 2012 г., 18:39
Который не возвращает значение, если все условия ложны.
 03 нояб. 2013 г., 07:19
Вы не нуждаетесь в остальном :)
Решение Вопроса
Update for 2017

тает, я бы хотел обновить его на 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() );

Original Answer

Поскольку все браузеры ведут себя по-разному, вам необходимо сначала проверить значения, а затем использовать правильный. Вот функция, которая делает это для вас:

function getWidth() {
  if (self.innerWidth) {
    return self.innerWidth;
  }

  if (document.documentElement && document.documentElement.clientWidth) {
    return document.documentElement.clientWidth;
  }

  if (document.body) {
    return document.body.clientWidth;
  }
}

и аналогично для высоты:

function getHeight() {
  if (self.innerHeight) {
    return self.innerHeight;
  }

  if (document.documentElement && document.documentElement.clientHeight) {
    return document.documentElement.clientHeight;
  }

  if (document.body) {
    return document.body.clientHeight;
  }
}

Вызовите оба из них в ваших сценариях, используяgetWidth() или жеgetHeight(), Если ни одно из собственных свойств браузера не определено, оно вернетundefined.

 03 апр. 2016 г., 13:32
@ user2118559var pageWidth = Math.max(self.innerWidth || 0, document.documentElement.clientWidth || 0, document.body.clientWidth || 0); а такжеvar windowWidth = self.innerWidth || -1; // из-за & quot; тела & quot; или "экран" или «документ» не являются "окном" если вы проверите переполненный контент HTML, вы можете понять. #i.stack.imgur.com/6xPdH.png
 13 мар. 2015 г., 05:00
... каждый из этих трех показывает некоторый результат, и все результаты (ширины) различны. Например с Google Chrome см.self.innerWidth 423, document.documentElement.clientWidth 326 а такжеdocument.body.clientWidth 406, В таком случае вопрос: что правильно и что использовать? Например, я хочу изменить размер карты Google. 326 или 423 большая разница. Если ширина ~ 700, то см. 759, 735, 742 (небольшая разница)
 21 июн. 2014 г., 19:21
Лучший ответ, потому что мне не нужно включать библиотеку 33 КБ для простого перенаправления на основе ширины окна браузера
 17 авг. 2014 г., 07:04
Это дает правильные (или ожидаемые) результаты последовательно по сравнению с реализацией jQuery.
 12 авг. 2016 г., 19:39
ошибка копирования-вставки в вашем примере, функцияgetWidth() Рекомендацииself.innerHeight

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-браузером Chrome, настольным Chrome, так что, похоже, он работает хорошо.

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

 09 авг. 2017 г., 15:37
Safari iphone, похоже, не поддерживает это.
 23 июл. 2017 г., 10:09
Если они используют IE9 или старше, они не заслуживают Интернета.
 21 июл. 2017 г., 09:36
Поддерживает только IE10 +.
 20 февр. 2019 г., 16:53
Более новые версии iOS Safari должны поддерживать matchMedia. Источник:caniuse.com/#feat=matchmedia

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

 24 июн. 2009 г., 16:43
Оказывается, вы не так. Который потрясающий. Отредактированный ответ за. Спасибо за хедз-ап.
 07 февр. 2018 г., 17:34
Добавление 30 тыс. Строк кода для получения ширины окна - ПЛОХОЕ решение!
 24 июн. 2009 г., 16:44
Поддержка $ (window) .width () в jQuery начиная с версии 1.2, на случай, если она актуальна для всех.
 19 янв. 2013 г., 11:17
Я обнаружил, что $ (window) .width () не всегда возвращает то же значение, что и innerWidth / clientWidth, как показано в примерах в ответе ниже. Версия jQuery не учитывает полосы прокрутки браузера (во всяком случае, в FF). Это вызвало у меня большую путаницу с запросами CSS @media, которые, по-видимому, запускаются с неправильной шириной. Использование нативного кода представляется более надежным, поскольку учитывает внешний вид полос прокрутки.
 24 июн. 2009 г., 16:41
Если я правильно помню, jQuery перенес большую часть измерений в ядро. Вам все еще нужны размеры, чтобы делать то, что вы предлагаете?

Ваш ответ на вопрос