23 июл. 2017 г., 17:30 от Brett DeWoodyAmr Elgarhy

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

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

Я нашел это:

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

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

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

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

14 янв. 2015 г., 08:34 от user3651121

<!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>
13 февр. 2014 г., 01:52 от Bradley Flood
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 ()

28 нояб. 2012 г., 07:37 от Communityismael

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;
}
31 июл. 2017 г., 22:40 от Travis
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.

27 мая 2015 г., 08:47 от Darius.V

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

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

16 мая 2013 г., 23:02 от chaos

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

ВАШ ОТВЕТ НА ВОПРОС