it-roy-ru.com

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

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

Я нашел это:

javascript:alert(document.body.offsetWidth);

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

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

168
Amr Elgarhy

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

Мой оригинальный ответ был написан в 2009 году. Хотя он все еще работает, я хотел бы обновить его на 2017 год. Браузеры могут вести себя по-другому. Я надеюсь, что команда jQuery отлично справится с задачей обеспечения согласованности между браузерами. Однако нет необходимости включать всю библиотеку. В источнике jQuery соответствующая часть находится в строка 37 of sizes.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.

111
Travis

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

301
chaos
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 ()

46
Bradley Flood

Почему никто не упоминает 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 default и Android chrome, настольным Chrome, так что пока все выглядит хорошо.

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

14
Darius.V

От 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>
7
user3651121

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

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;
}
6
ismael