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

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

168 голосов
/ 24 июня 2009

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

Я нашел это: 

javascript:alert(document.body.offsetWidth);

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

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

Ответы [ 6 ]

301 голосов
/ 24 июня 2009

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

111 голосов
/ 24 июня 2009

Обновление на 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.

46 голосов
/ 13 февраля 2014 
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 ()

14 голосов
/ 27 мая 2015

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

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

7 голосов
/ 14 января 2015

От 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 голосов
/ 06 июня 2012

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

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;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...