Я пытаюсь написать функцию JavaScript, чтобы получить текущую ширину браузера.
Я нашел это:
javascript:alert(document.body.offsetWidth);Но его проблема в том, что он потерпит неудачу, если тело имеет ширину 100%.
Есть ли другая лучшая функция или обходной путь?
Ответы:
Мой оригинальный ответ был написан в 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.
self.innerWidth 423, document.documentElement.clientWidth 326и document.body.clientWidth 406. В таком случае вопрос: что правильно и что использовать? Например, я хочу изменить размер карты Google. 326 или 423 большая разница. Если ширина ~ 700, то см. 759, 735, 742 (небольшая разница)
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
getWidth()ссылки на функцииself.innerHeight
Это боль в заднице . Я рекомендую пропустить ерунду и использовать jQuery , который позволяет вам просто делать $(window).width().
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 ()
Почему никто не упоминает 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, так что, похоже, он работает хорошо.
Конечно, он не возвращает числовое значение, но возвращает логическое значение - если оно совпадает или нет, поэтому может не совсем соответствовать вопросу, но это то, что мы хотим в любом случае и, возможно, хочет автор вопроса.
От 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>Вот более короткая версия функции, представленной выше:
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;
}Адаптированное решение для современного ответа 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);
};Важное дополнение к ответу Трэвиса; вам нужно поместить 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 в любом месте впоследствии.