Я намагаюся написати функцію 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;// через "body" або "screen" або "document" не є "вікном", якщо ви перевіряєте переповнений вміст 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 повертає недійсні значення для ширини () та висоти ()
Чому ніхто не згадує 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 за замовчуванням та андроїд-хромом, настільним хромом, поки що схоже, що це працює добре.
Звичайно, воно не повертає числового значення, але повертає булеве - якщо збігається чи ні, то може не точно відповідати питанню, але це те, що ми хочемо в будь-якому випадку і, мабуть, хоче автор питання.
Від 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;
}Адаптоване рішення до відповіді сучасного Дж. Травіса:
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 в будь-якому місці після цього.