Получите размеры окна просмотра браузера с помощью JavaScript
Я хочу предоставить своим посетителям возможность видеть изображения в высоком качестве. Могу ли я определить размер окна?
Или, что еще лучше, размер окна просмотра браузера с JavaScript? Смотрите зеленую зону здесь:
17 ответов
Кросс-браузер @media (width) а также @media (height) ценности
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
window.innerWidth а также .innerHeight
- получает видовой экран CSS
@media (width)а также@media (height)которые включают полосы прокрутки initial-scaleи изменения масштаба могут привести к неправильному уменьшению значений мобильных устройств до того, что PPK называет визуальным окном просмотра, и может быть меньше, чем@mediaценности- увеличение может привести к отключению значений на 1 пиксель из-за собственного округления
undefinedв IE8-
document.documentElement.clientWidth а также .clientHeight
- равно ширине области просмотра CSS минус ширина полосы прокрутки
- Матчи
@media (width)а также@media (height)когда нет полосы прокрутки - такой же как
jQuery(window).width()который jQuery вызывает в окне просмотра браузера - доступный кросс-браузер
- неточно, если тип документа отсутствует
Ресурсы
- Текущие выходы для различных измерений
- Verge использует кросс-браузерные методы просмотра
- фактическое использование
matchMediaполучить точные размеры в любой единице
$(window).width() а также $(window).height()
Вы можете использовать свойства window.innerWidth и window.innerHeight.
Если вы не используете JQuery, это будет ужасно. Вот фрагмент кода, который должен работать во всех новых браузерах. Поведение отличается в режиме Quirks и режиме стандартов в IE. Это позаботится об этом.
var elem = (document.compatMode === "CSS1Compat") ?
document.documentElement :
document.body;
var height = elem.clientHeight;
var width = elem.clientWidth;
Я посмотрел и нашел кроссбраузерный путь:
function myFunction(){
if(window.innerWidth !== undefined && window.innerHeight !== undefined) {
var w = window.innerWidth;
var h = window.innerHeight;
} else {
var w = document.documentElement.clientWidth;
var h = document.documentElement.clientHeight;
}
var txt = "Page size: width=" + w + ", height=" + h;
document.getElementById("demo").innerHTML = txt;
}<!DOCTYPE html>
<html>
<body onresize="myFunction()" onload="myFunction()">
<p>
Try to resize the page.
</p>
<p id="demo">
</p>
</body>
</html>Я знаю, что это приемлемый ответ, но я столкнулся с ситуацией, когда clientWidth не работал, так как iPhone (по крайней мере, мой) вернул 980, а не 320, поэтому я использовал window.screen.width, Я работал над существующим сайтом, меня сделали "отзывчивым" и мне пришлось заставить большие браузеры использовать другой мета-видовой экран.
Надеюсь, что это кому-то поможет, возможно, оно не идеальное, но оно работает в моем тестировании на iOS и Android.
//sweet hack to set meta viewport for desktop sites squeezing down to mobile that are big and have a fixed width
//first see if they have window.screen.width avail
(function() {
if (window.screen.width)
{
var setViewport = {
//smaller devices
phone: 'width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no',
//bigger ones, be sure to set width to the needed and likely hardcoded width of your site at large breakpoints
other: 'width=1045,user-scalable=yes',
//current browser width
widthDevice: window.screen.width,
//your css breakpoint for mobile, etc. non-mobile first
widthMin: 560,
//add the tag based on above vars and environment
setMeta: function () {
var params = (this.widthDevice <= this.widthMin) ? this.phone : this.other;
var head = document.getElementsByTagName("head")[0];
var viewport = document.createElement('meta');
viewport.setAttribute('name','viewport');
viewport.setAttribute('content',params);
head.appendChild(viewport);
}
}
//call it
setViewport.setMeta();
}
}).call(this);
Если вы ищете решение не-JQuery, которое дает правильные значения в виртуальных пикселях на мобильном телефоне, и вы думаете, что это просто window.innerHeight или же document.documentElement.clientHeight может решить вашу проблему, пожалуйста, сначала изучите эту ссылку: http://tripleodeon.com/wp-content/uploads/2011/12/table.html
Разработчик провел хорошее тестирование, которое выявило проблему: вы можете получить неожиданные значения для Android/iOS, альбомной / портретной ориентации, дисплеев с нормальной / высокой плотностью.
Мой текущий ответ пока не является "серебряной пулей" (//todo), а скорее предупреждением для тех, кто собирается быстро скопировать и вставить любое решение из этого потока в производственный код.
Я искал ширину страницы в виртуальных пикселях на мобильном телефоне, и я нашел единственный работающий код (неожиданно!) window.outerWidth, Позже я проверю эту таблицу на предмет правильного решения с указанием высоты, исключая панель навигации, когда у меня будет время
Я смог найти окончательный ответ в JavaScript: "Полное руководство", 6-е издание, О'Рейли, с. 391:
Это решение работает даже в режиме Quirks, а текущие решения ryanve и ScottEvernden - нет.
function getViewportSize(w) {
// Use the specified window or the current window if no argument
w = w || window;
// This works for all browsers except IE8 and before
if (w.innerWidth != null) return { w: w.innerWidth, h: w.innerHeight };
// For IE (or any browser) in Standards mode
var d = w.document;
if (document.compatMode == "CSS1Compat")
return { w: d.documentElement.clientWidth,
h: d.documentElement.clientHeight };
// For browsers in Quirks mode
return { w: d.body.clientWidth, h: d.body.clientHeight };
}
за исключением того, что мне интересно, почему линия if (document.compatMode == "CSS1Compat") не является if (d.compatMode == "CSS1Compat")все выглядит хорошо.
Этот код взят из http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/
function viewport() {
var e = window, a = 'inner';
if (!('innerWidth' in window )) {
a = 'client';
e = document.documentElement || document.body;
}
return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
}
NB: чтобы прочитать ширину, используйте console.log('viewport width'+viewport().width);
Для динамического определения размера
Вы можете сделать это в родном, без JQuery или дополнительных услуг
Есть разница между window.innerHeight а также document.documentElement.clientHeight, Первый включает в себя высоту горизонтальной полосы прокрутки.
Решение, которое соответствовало бы стандартам W3C, заключалось бы в создании прозрачного div (например, динамически с JavaScript), установке его ширины и высоты в 100vw/100vh (в единицах просмотра), а затем получении его offsetWidth и offsetHeight. После этого элемент может быть удален снова. Это не будет работать в старых браузерах, потому что модули окна просмотра являются относительно новыми, но если вы не заботитесь о них, а о (скоро) стандартах, вы можете определенно пойти по этому пути:
var objNode = document.createElement("div");
objNode.style.width = "100vw";
objNode.style.height = "100vh";
document.body.appendChild(objNode);
var intViewportWidth = objNode.offsetWidth;
var intViewportHeight = objNode.offsetHeight;
document.body.removeChild(objNode);
Конечно, вы также можете установить objNode.style.position = "fixed", а затем использовать 100% в качестве ширины / высоты - это должно иметь тот же эффект и в некоторой степени улучшить совместимость. Кроме того, установка позиции в фиксированное положение может быть хорошей идеей в целом, потому что в противном случае div будет невидимым, но займет некоторое место, что приведет к появлению полос прокрутки и т. Д.
Так должно быть
let vw = document.documentElement.clientWidth;
let vh = document.documentElement.clientHeight;
понять область просмотра: https://developer.mozilla.org/en-US/docs/Web/CSS/Viewport_concepts
сокращение для ссылки выше:
viewport.moz.one
Я создал сайт для тестирования на устройствах: https://vp.moz.one
Это то, как я это делаю, я попробовал это в IE 8 -> 10, FF 35, Chrome 40, он будет работать очень гладко во всех современных браузерах (как определено window.innerWidth) и в IE 8 (без окна. innerWidth), он также работает плавно, любая проблема (например, мигание из-за переполнения: "скрыто"), пожалуйста, сообщите об этом. Меня не очень интересует высота области просмотра, так как я сделал эту функцию просто для обхода некоторых адаптивных инструментов, но она может быть реализована. Надеюсь, это поможет, я ценю комментарии и предложения.
function viewportWidth () {
if (window.innerWidth) return window.innerWidth;
var
doc = document,
html = doc && doc.documentElement,
body = doc && (doc.body || doc.getElementsByTagName("body")[0]),
getWidth = function (elm) {
if (!elm) return 0;
var setOverflow = function (style, value) {
var oldValue = style.overflow;
style.overflow = value;
return oldValue || "";
}, style = elm.style, oldValue = setOverflow(style, "hidden"), width = elm.clientWidth || 0;
setOverflow(style, oldValue);
return width;
};
return Math.max(
getWidth(html),
getWidth(body)
);
}
Если вы используете React, то вы можете использовать это с последней версией обработчиков реакции.
// Usage
function App() {
const size = useWindowSize();
return (
<div>
{size.width}px / {size.height}px
</div>
);
}
Вы можете просто использовать метод JavaScript window.matchMedia() для обнаружения мобильного устройства на основе медиа-запроса CSS. Это лучший и самый надежный способ обнаружения мобильных устройств.
Следующий пример покажет вам, как на самом деле работает этот метод:
<script>
$(document).ready(function(){
if(window.matchMedia("(max-width: 767px)").matches){
// The viewport is less than 768 pixels wide
alert("This is a mobile device.");
} else{
// The viewport is at least 768 pixels wide
alert("This is a tablet or desktop.");
}
});
</script>
Вы можете использоватьwindow.addEventListener('resize' , yourfunction);она запустит вашу функцию при изменении размера окна. когда вы используете
window.innerWidth или же
document.documentElement.clientWidthон доступен только для чтения. вы можете использовать оператор if в своей функции и сделать его лучше.