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

180

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

Я нашел это:

javascript:alert(document.body.offsetWidth);

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

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

javascript jquery html css Амр Элгархи
источник

Ответы:

133

Обновление на 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() );
Развернуть фрагмент

Оригинальный ответ

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

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.

Travis
источник
11
Лучший ответ, потому что мне не нужно включать библиотеку 33 КБ для простого перенаправления, основанного на ширине окна браузера
David Aguirre
1
Это дает правильные (или ожидаемые) результаты последовательно по сравнению с реализацией jQuery.
Эммануэль Джон
3
... каждый из этих трех показывает некоторый результат, и все результаты (ширины) различны. Например , с Google Chrome см self.innerWidth 423, document.documentElement.clientWidth 326и document.body.clientWidth 406. В таком случае вопрос: что правильно и что использовать? Например, я хочу изменить размер карты Google. 326 или 423 большая разница. Если ширина ~ 700, то см. 759, 735, 742 (небольшая разница)
Андрис
1
@ user2118559 var pageWidth = Math.max(self.innerWidth || 0, document.documentElement.clientWidth || 0, document.body.clientWidth || 0);и var windowWidth = self.innerWidth || -1;// потому что «тело», «экран» или «документ» не являются «окном», если вы проверяете переполненное содержимое HTML, которое вы можете понять. # i.stack.imgur.com/6xPdH.png
Абдулла Айдын
1
ошибка копирования-вставки в вашем примере, getWidth()ссылки на функцииself.innerHeight
theGecko
309

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

хаос
источник
2
Если я правильно помню, jQuery потянул большую часть измерений в ядро. Вам все еще нужны размеры, чтобы делать то, что вы предлагаете?
Носредна
Оказывается, нет. Который потрясающий. Отредактированный ответ за. Спасибо за хедз-ап.
хаос
6
Поддержка $ (window) .width () в jQuery начиная с версии 1.2, на случай, если она кому-нибудь нужна.
хаос
18
Я обнаружил, что $ (window) .width () не всегда возвращает то же значение, что и innerWidth / clientWidth, как показано в примерах в ответе ниже. Версия jQuery не учитывает полосы прокрутки браузера (во всяком случае, в FF). Это вызвало у меня большую путаницу с запросами CSS @media, которые, по-видимому, запускаются с неправильной шириной. Использование нативного кода представляется более надежным, поскольку учитывает внешний вид полос прокрутки.
Кодер
5
Добавление 30 тыс. Строк кода для получения ширины окна - ПЛОХОЕ решение!
codechimp
49 
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 ()

Брэдли Флад
источник
1
Возникли проблемы при использовании этого на Safari iphone.
Ню Эверест
17

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

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

Darius.V
источник
1
Поддерживает только IE10 +.
Qarthandso
17
Если они используют IE9 или старше, они не заслуживают Интернета.
Darius.V
Safari iphone, кажется, не поддерживает это.
Ню Эверест
Более новые версии iOS Safari должны поддерживать matchMedia. Источник: caniuse.com/#feat=matchmedia
Vargr
8

От 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>
user3651121
источник
Подход работает прекрасно и может быть принятым ответом, потому что он намного короче, чем любое другое решение (кроме использования jQuery).
Саймон Стейнбергер
2
Не выдаст ли ошибку, если document.documentElement не определен?
Филип
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;
}
Исмаэль
источник
4
Который не возвращает значение, если все условия ложны.
Майк C
10
Вам не нужны остальные :)
Ник
0

Адаптированное решение для современного ответа JS of Travis:

const getPageWidth = () => {
  const bodyMax = document.body
    ? Math.max(document.body.scrollWidth, document.body.offsetWidth)
    : 0;

  const docElementMax = document.documentElement
    ? Math.max(
        document.documentElement.scrollWidth,
        document.documentElement.offsetWidth,
        document.documentElement.clientWidth
      )
    : 0;

  return Math.max(bodyMax, docElementMax);
};
Серджиу
источник
0

Важное дополнение к ответу Трэвиса; вам нужно поместить getWidth () в тело документа, чтобы убедиться, что ширина полосы прокрутки отсчитывается, иначе ширина полосы прокрутки браузера вычитается из getWidth (). Что я сделал ;

<body>
<script>
function getWidth(){
return Math.max(document.body.scrollWidth,
document.documentElement.scrollWidth,
document.body.offsetWidth,
document.documentElement.offsetWidth,
document.documentElement.clientWidth);
}
var aWidth=getWidth();
</script>
</body>

и вызвать переменную aWidth в любом месте впоследствии.

burkul
источник