Получить размер экрана, текущей веб-страницы и окна браузера
Как я могу получить windowWidth
, windowHeight
, pageWidth
, pageHeight
, screenWidth
, screenHeight
, pageX
, pageY
, screenX
, screenY
который будет работать во всех основных браузерах?
24 ответа
Если вы используете jQuery, вы можете получить размер окна или документа, используя методы jQuery:
$(window).height(); // returns height of browser viewport
$(document).height(); // returns height of HTML document (same as pageHeight in screenshot)
$(window).width(); // returns width of browser viewport
$(document).width(); // returns width of HTML document (same as pageWidth in screenshot)
Для размера экрана вы можете использовать screen
Объект следующим образом:
screen.height;
screen.width;
Это все, что вам нужно знать:
http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/
но вкратце:
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
x = w.innerWidth || e.clientWidth || g.clientWidth,
y = w.innerHeight|| e.clientHeight|| g.clientHeight;
alert(x + ' × ' + y);
Вот кросс-браузерное решение с чистым JavaScript ( Source):
var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
Не-jQuery способ получить доступное измерение экрана. window.screen.width/height
уже был выставлен, но для отзывчивого веб-дизайна и полноты я думаю, что стоит упомянуть эти атрибуты:
alert(window.screen.availWidth);
alert(window.screen.availHeight);
http://www.quirksmode.org/dom/w3c_cssom.html:
utilWidth и utilHeight - доступная ширина и высота на экране (исключая панели задач ОС и т. п.).
Но когда мы говорим об адаптивных экранах и если по какой-то причине мы хотим справиться с этим с помощью jQuery,
window.innerWidth, window.innerHeight
дает правильное измерение. Даже это удаляет дополнительное пространство полосы прокрутки, и нам не нужно беспокоиться о корректировке этого пространства:)
Полный 2020
Я удивлен, что на этот вопрос около 10 лет, и похоже, что до сих пор никто не дал полного ответа (с 10 значениями). Поэтому я внимательно анализирую вопрос OP (особенно изображение) и делаю несколько замечаний
- центр системы координат
(0,0)
находится в окне просмотра (окно браузера без полос и основных границ) в верхнем левом углу, а оси направлены вправо и вниз (что было отмечено на изображении OP), поэтому значенияpageX, pageY, screenX, screenY
должно быть отрицательным (или нулем, если страница маленькая или не прокручивается) - за
screenHeight/Width
OP хочет подсчитать высоту / ширину экрана, включая строку системного меню (например, в MacOs) - вот почему мы НЕ используем.availWidth/Height
(который не считается) - за
windowWidth/Height
OP не хочет подсчитывать размер полос прокрутки, поэтому мы используем.clientWidth/Height
- в
screenY
- в приведенном ниже решении мы добавляем в положение верхнего левого угла браузера (window.screenY
) высота его меню / таблиц / URL-адреса). Но трудно рассчитать это значение, если в браузере отображается нижняя панель загрузки и / или если консоль разработчика открыта в нижней части страницы - в этом случае это значение будет увеличено на размер этой панели / высоты консоли в приведенном ниже решении. Вероятно, невозможно прочитать значение высоты панели / консоли, чтобы внести коррективы (без какой-либо уловки, например, попросить пользователя закрыть эту панель / консоль перед измерениями...) pageWidth
- если pageWidth меньше, чем windowWidth, нам нужно вручную рассчитать размер<body>
дочерние элементы, чтобы получить это значение (мы делаем пример расчета вcontentWidth
в решении ниже - но в целом это может быть сложно в этом случае)- для простоты я предполагаю, что
<body>
маржа =0 - в противном случае вы должны учитывать эти значения при расчетеpageWidth/Height
а такжеpageX/Y
function sizes() {
let contentWidth = [...document.body.children].reduce(
(a, el) => Math.max(a, el.getBoundingClientRect().right), 0)
- document.body.getBoundingClientRect().x;
return {
windowWidth: document.documentElement.clientWidth,
windowHeight: document.documentElement.clientHeight,
pageWidth: Math.min(document.body.scrollWidth, contentWidth),
pageHeight: document.body.scrollHeight,
screenWidth: window.screen.width,
screenHeight: window.screen.height,
pageX: document.body.getBoundingClientRect().x,
pageY: document.body.getBoundingClientRect().y,
screenX: -window.screenX,
screenY: -window.screenY - (window.outerHeight-window.innerHeight),
}
}
// TEST
function show() {
console.log(sizes());
}
body { margin: 0 }
.box { width: 3000px; height: 4000px; background: red; }
<div class="box">
CAUTION: stackru snippet gives wrong values for screenX-Y,
but if you copy its code to your page directly the values will be right<br>
<button onclick="show()" style="">CALC</button>
</div>
Я тестирую его в Chrome 83.0, Safari 13.1, Firefox 77.0 и Edge 83.0.
function wndsize(){
var w = 0;var h = 0;
//IE
if(!window.innerWidth){
if(!(document.documentElement.clientWidth == 0)){
//strict mode
w = document.documentElement.clientWidth;h = document.documentElement.clientHeight;
} else{
//quirks mode
w = document.body.clientWidth;h = document.body.clientHeight;
}
} else {
//w3c
w = window.innerWidth;h = window.innerHeight;
}
return {width:w,height:h};
}
function wndcent(){
var hWnd = (arguments[0] != null) ? arguments[0] : {width:0,height:0};
var _x = 0;var _y = 0;var offsetX = 0;var offsetY = 0;
//IE
if(!window.pageYOffset){
//strict mode
if(!(document.documentElement.scrollTop == 0)){offsetY = document.documentElement.scrollTop;offsetX = document.documentElement.scrollLeft;}
//quirks mode
else{offsetY = document.body.scrollTop;offsetX = document.body.scrollLeft;}}
//w3c
else{offsetX = window.pageXOffset;offsetY = window.pageYOffset;}_x = ((wndsize().width-hWnd.width)/2)+offsetX;_y = ((wndsize().height-hWnd.height)/2)+offsetY;
return{x:_x,y:_y};
}
var center = wndcent({width:350,height:350});
document.write(center.x+';<br>');
document.write(center.y+';<br>');
document.write('<DIV align="center" id="rich_ad" style="Z-INDEX: 10; left:'+center.x+'px;WIDTH: 350px; POSITION: absolute; TOP: '+center.y+'px; HEIGHT: 350px"><!--К сожалению, у Вас не установлен flash плеер.--></div>');
Чтобы проверить высоту и ширину вашей текущей загруженной страницы любого веб-сайта, используйте "консоль" или после нажатия "Проверить".
Шаг 1: Нажмите правую кнопку мыши, нажмите "Проверить", а затем нажмите "Консоль".
Шаг 2. Убедитесь, что экран вашего браузера не находится в режиме "Развернуть". Если экран браузера находится в режиме "Развернуть", вам необходимо сначала нажать кнопку "Развернуть" (присутствует в правом или левом верхнем углу) и развернуть ее.
Шаг 3: Теперь напишите следующее после знака "больше" (">"), т.е.
> window.innerWidth
output : your present window width in px (say 749)
> window.innerHeight
output : your present window height in px (say 359)
Вы также можете получить ширину и высоту окна, избегая панели инструментов браузера и других вещей. Это реальная полезная область в окне браузера.
Для этого используйте:window.innerWidth
а также window.innerHeight
свойства ( см. документ в w3schools).
В большинстве случаев это будет лучший способ, например, отображать идеально центрированный плавающий модальный диалог. Это позволяет вам рассчитывать позиции в окне, независимо от того, какую ориентацию разрешения или размер окна использует браузер.
Полное руководство по размерам экрана
JavaScript
Для высоты:
document.body.clientHeight // Inner height of the HTML document body, including padding
// but not the horizontal scrollbar height, border, or margin
screen.height // Device screen height (i.e. all physically visible stuff)
screen.availHeight // Device screen height minus the operating system taskbar (if present)
window.innerHeight // The current document's viewport height, minus taskbars, etc.
window.outerHeight // Height the current window visibly takes up on screen
// (including taskbars, menus, etc.)
Примечание. Когда окно развернуто, оно будет равно screen.availHeight.
Для ширины:
document.body.clientWidth // Full width of the HTML page as coded, minus the vertical scroll bar
screen.width // Device screen width (i.e. all physically visible stuff)
screen.availWidth // Device screen width, minus the operating system taskbar (if present)
window.innerWidth // The browser viewport width (including vertical scroll bar, includes padding but not border or margin)
window.outerWidth // The outer window width (including vertical scroll bar,
// toolbars, etc., includes padding and border but not margin)
JQuery
Для высоты:
$(document).height() // Full height of the HTML page, including content you have to
// scroll to see
$(window).height() // The current document's viewport height, minus taskbars, etc.
$(window).innerHeight() // The current document's viewport height, minus taskbars, etc.
$(window).outerHeight() // The current document's viewport height, minus taskbars, etc.
Для ширины:
$(document).width() // The browser viewport width, minus the vertical scroll bar
$(window).width() // The browser viewport width (minus the vertical scroll bar)
$(window).innerWidth() // The browser viewport width (minus the vertical scroll bar)
$(window).outerWidth() // The browser viewport width (minus the vertical scroll bar)
С введением globalThis
в ES2020 вы можете использовать такие свойства, как.
Для размера экрана:
globalThis.screen.availWidth
globalThis.screen.availHeight
Для размера окна
globalThis.outerWidth
globalThis.outerHeight
Для смещения:
globalThis.pageXOffset
globalThis.pageYOffset
...& скоро.
alert("Screen Width: "+ globalThis.screen.availWidth +"\nScreen Height: "+ globalThis.screen.availHeight)
Если вам нужно действительно пуленепробиваемое решение для ширины и высоты документа (pageWidth
а также pageHeight
на рисунке), вы можете рассмотреть возможность использования моего плагина, jQuery.documentSize.
У него только одна цель: всегда возвращать правильный размер документа, даже в тех случаях, когда jQuery и другие методы дают сбой. Несмотря на его название, вам не обязательно использовать jQuery - он написан на ванильном Javascript и работает также без jQuery.
Использование:
var w = $.documentWidth(),
h = $.documentHeight();
для глобального document
, Для других документов, например, во встроенном фрейме, к которому у вас есть доступ, передайте документ в качестве параметра:
var w = $.documentWidth( myIframe.contentDocument ),
h = $.documentHeight( myIframe.contentDocument );
Обновление: теперь и для размеров окна
Начиная с версии 1.1.0, jQuery.documentSize также обрабатывает размеры окна.
Это необходимо, потому что
$( window ).height()
глючит в iOS, до такой степени, что бесполезен$( window ).width()
а также$( window ).height()
ненадежны на мобильных устройствах, потому что они не справляются с эффектами мобильного масштабирования.
jQuery.documentSize обеспечивает $.windowWidth()
а также $.windowHeight()
, которые решают эти вопросы. Для получения дополнительной информации, пожалуйста, ознакомьтесь с документацией.
Я написал небольшой букмарклет javascript, который можно использовать для отображения размера. Вы можете легко добавить его в свой браузер, и всякий раз, когда вы щелкаете по нему, вы увидите размер в правом углу окна вашего браузера.
Здесь вы найдете информацию о том, как использовать букмарклет https://en.wikipedia.org/wiki/Bookmarklet
Bookmarklet
javascript:(function(){!function(){var i,n,e;return n=function(){var n,e,t;return t="background-color:azure; padding:1rem; position:fixed; right: 0; z-index:9999; font-size: 1.2rem;",n=i('<div style="'+t+'"></div>'),e=function(){return'<p style="margin:0;">width: '+i(window).width()+" height: "+i(window).height()+"</p>"},n.html(e()),i("body").prepend(n),i(window).resize(function(){n.html(e())})},(i=window.jQuery)?(i=window.jQuery,n()):(e=document.createElement("script"),e.src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js",e.onload=n,document.body.appendChild(e))}()}).call(this);
Оригинальный код
Оригинальный код в кофе:
(->
addWindowSize = ()->
style = 'background-color:azure; padding:1rem; position:fixed; right: 0; z-index:9999; font-size: 1.2rem;'
$windowSize = $('<div style="' + style + '"></div>')
getWindowSize = ->
'<p style="margin:0;">width: ' + $(window).width() + ' height: ' + $(window).height() + '</p>'
$windowSize.html getWindowSize()
$('body').prepend $windowSize
$(window).resize ->
$windowSize.html getWindowSize()
return
if !($ = window.jQuery)
# typeof jQuery=='undefined' works too
script = document.createElement('script')
script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'
script.onload = addWindowSize
document.body.appendChild script
else
$ = window.jQuery
addWindowSize()
)()
В основном, код предшествует небольшому div, который обновляется при изменении размера вашего окна.
В некоторых случаях, связанных с адаптивным макетом $(document).height()
может вернуть неправильные данные, которые отображают только высоту порта просмотра. Например, когда у некоторого div#wrapper есть height:100%, этот #wrapper может быть растянут на некоторый блок внутри него. Но его высота все равно будет как высота окна просмотра. В такой ситуации вы можете использовать
$('#wrapper').get(0).scrollHeight
Это представляет фактический размер обертки.
Вы должны использоватьчтобы получить РЕАЛЬНЫЕ пропорции.
(Заголовок для внимания.)
Вы не можете получить правильную ширину и/или высоту экрана, используя ТОЛЬКО
Получить правильные пропорции экрана можно следующим образом (попробуйте использовать масштабирование в браузере):
Я разработал библиотеку для того, чтобы знать реальный размер области просмотра для настольных компьютеров и мобильных браузеров, потому что размеры области просмотра несовместимы между устройствами и не могут полагаться на все ответы этого поста (согласно всем исследованиям, которые я сделал по этому поводу): https://github.com/pyrsmk/W
Иногда вам нужно увидеть изменения ширины / высоты при изменении размера окна и внутреннего содержимого.
Для этого я написал небольшой скрипт, который добавляет окно журнала, которое динамически отслеживает все изменения размера и почти сразу же обновляет.
Он добавляет действительный HTML с фиксированной позицией и высоким z-индексом, но достаточно мал, так что вы можете:
- использовать его на реальном сайте
- используйте его для тестирования мобильных / адаптивных просмотров
Проверено на: Chrome 40, IE11, но вполне возможно работать и в других / старых браузерах...:)
function gebID(id){ return document.getElementById(id); }
function gebTN(tagName, parentEl){
if( typeof parentEl == "undefined" ) var parentEl = document;
return parentEl.getElementsByTagName(tagName);
}
function setStyleToTags(parentEl, tagName, styleString){
var tags = gebTN(tagName, parentEl);
for( var i = 0; i<tags.length; i++ ) tags[i].setAttribute('style', styleString);
}
function testSizes(){
gebID( 'screen.Width' ).innerHTML = screen.width;
gebID( 'screen.Height' ).innerHTML = screen.height;
gebID( 'window.Width' ).innerHTML = window.innerWidth;
gebID( 'window.Height' ).innerHTML = window.innerHeight;
gebID( 'documentElement.Width' ).innerHTML = document.documentElement.clientWidth;
gebID( 'documentElement.Height' ).innerHTML = document.documentElement.clientHeight;
gebID( 'body.Width' ).innerHTML = gebTN("body")[0].clientWidth;
gebID( 'body.Height' ).innerHTML = gebTN("body")[0].clientHeight;
}
var table = document.createElement('table');
table.innerHTML =
"<tr><th>SOURCE</th><th>WIDTH</th><th>x</th><th>HEIGHT</th></tr>"
+"<tr><td>screen</td><td id='screen.Width' /><td>x</td><td id='screen.Height' /></tr>"
+"<tr><td>window</td><td id='window.Width' /><td>x</td><td id='window.Height' /></tr>"
+"<tr><td>document<br>.documentElement</td><td id='documentElement.Width' /><td>x</td><td id='documentElement.Height' /></tr>"
+"<tr><td>document.body</td><td id='body.Width' /><td>x</td><td id='body.Height' /></tr>"
;
gebTN("body")[0].appendChild( table );
table.setAttribute(
'style',
"border: 2px solid black !important; position: fixed !important;"
+"left: 50% !important; top: 0px !important; padding:10px !important;"
+"width: 150px !important; font-size:18px; !important"
+"white-space: pre !important; font-family: monospace !important;"
+"z-index: 9999 !important;background: white !important;"
);
setStyleToTags(table, "td", "color: black !important; border: none !important; padding: 5px !important; text-align:center !important;");
setStyleToTags(table, "th", "color: black !important; border: none !important; padding: 5px !important; text-align:center !important;");
table.style.setProperty( 'margin-left', '-'+( table.clientWidth / 2 )+'px' );
setInterval( testSizes, 200 );
РЕДАКТИРОВАТЬ: Теперь стили применяются только к элементу таблицы регистратора - не ко всем таблицам - также это решение без jQuery:)
Вы можете использовать объект Screen, чтобы получить это.
Ниже приведен пример того, что он будет возвращать:
Screen {
availWidth: 1920,
availHeight: 1040,
width: 1920,
height: 1080,
colorDepth: 24,
pixelDepth: 24,
top: 414,
left: 1920,
availTop: 414,
availLeft: 1920
}
Чтобы получить ваш screenWidth
переменная, просто используйте screen.width
то же самое с screenHeight
, вы бы просто использовать screen.height
,
Чтобы получить ширину и высоту окна, было бы screen.availWidth
или же screen.availHeight
соответственно.
Для pageX
а также pageY
переменные, используйте window.screenX or Y
, Обратите внимание, что это с ОЧЕНЬ ЛЕВОГО / ТОП ВАШЕГО ЛЕВОГО / ТОП-ЭСТ ЭКРАНА. Так что, если у вас есть два экрана по ширине 1920
тогда окно 500px слева от правого экрана будет иметь значение X 2420
(1920+500). screen.width/height
Однако, отобразите ТЕКУЩИЙ экран шириной или высотой.
Чтобы получить ширину и высоту вашей страницы, используйте jQuery's $(window).height()
или же $(window).width()
,
Снова используя jQuery, используйте $("html").offset().top
а также $("html").offset().left
для тебя pageX
а также pageY
ценности.
// Here is the java script code
//To get the width/height of a window's content area
window.innerWidth
window.innerHeight
// To get The width/height of the browser window
window.outerWidth
window.outerHeight
вот мое решение!
// innerWidth
const screen_viewport_inner = () => {
let w = window,
i = `inner`;
if (!(`innerWidth` in window)) {
i = `client`;
w = document.documentElement || document.body;
}
return {
width: w[`${i}Width`],
height: w[`${i}Height`]
}
};
// outerWidth
const screen_viewport_outer = () => {
let w = window,
o = `outer`;
if (!(`outerWidth` in window)) {
o = `client`;
w = document.documentElement || document.body;
}
return {
width: w[`${o}Width`],
height: w[`${o}Height`]
}
};
// style
const console_color = `
color: rgba(0,255,0,0.7);
font-size: 1.5rem;
border: 1px solid red;
`;
// testing
const test = () => {
let i_obj = screen_viewport_inner();
console.log(`%c screen_viewport_inner = \n`, console_color, JSON.stringify(i_obj, null, 4));
let o_obj = screen_viewport_outer();
console.log(`%c screen_viewport_outer = \n`, console_color, JSON.stringify(o_obj, null, 4));
};
// IIFE
(() => {
test();
})();
Вот как мне удалось получить ширину экрана в React JS Project:
Если ширина равна 1680, вернуть 570 иначе вернуть 200
var screenWidth = window.screen.availWidth;
<Label style={{ width: screenWidth == "1680" ? 570 : 200, color: "transparent" }}>a </Label>
Теперь мы можем безопасно использовать один нативный api окна javascript во всех браузерах, без контекста окна.
Синтаксис довольно понятен!
n = "<i>px</i><br>" /* separator */
dp = devicePixelRatio /* device zoom level */
body = (() => { document.body.innerHTML = /* ready! */
"Device zoom level: " + dp
+n+ "Screen width: " + screen.width
*dp+n+ "Screen height: "+ screen.height
*dp+n+ "Document frame height: " + innerHeight
*dp+n+ "Document frame width: " + innerWidth *dp+n+ "Parent document height: "+ outerHeight *dp+n+ "Parent document width: "+ outerWidth *dp+n+ "Window available height: "+ screen.availHeight *dp+n+ "Window available width: "+ screen.availWidth *dp+n+ "Document frame max scrollable X: "+ scrollMaxX *dp+n+ "Document frame max scrollable Y: "+ scrollMaxY
*dp+n+ "Distance from left screen to window: "+ screenX
*dp+n+ "Distance from top screen to window: "+ screenY
*dp+n
})()
Чтобы получить точные результаты во всех браузерах и устройствах, результаты должны быть умножены на devicePixelRatio.
Свойство Window devicePixelRatio возвращает отношение разрешения в физических пикселях к разрешению в пикселях CSS для текущего устройства отображения. Это значение также можно интерпретировать как отношение размеров пикселей: размер одного CSS-пикселя к размеру одного физического пикселя. Проще говоря, это говорит браузеру, сколько фактических пикселей экрана следует использовать для рисования одного пикселя CSS.
Это полезно при работе с разницей между рендерингом на стандартном дисплее и дисплеем HiDPI или Retina, который использует больше пикселей экрана для рисования одних и тех же объектов, что приводит к более четкому изображению.
Нет способа получить уведомление при изменении этого значения (что может случиться, например, если пользователь перетаскивает окно на дисплей с другой плотностью пикселей). Поскольку нет обратных вызовов или событий, доступных для обнаружения изменений плотности пикселей, единственный способ сделать это - периодически проверять значение devicePixelRatio, чтобы увидеть, изменилось ли оно. Просто не делайте это слишком часто, иначе вы окажете влияние на производительность.
https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio
Вот мое решение. Сначала идет некоторый служебный объект для работы с cookie
/* Simple getter and setter for cookies */
(function(global){
function setCookie(cname, cvalue, exdays) {
exdays = typeof exdays === 'undefined' && 365;
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return undefined;
}
global.Cookie = {
get: getCookie,
set: setCookie
};
})(window);
Тогда вы можете сделать что-то вроде..
/*
Detect screen width and height and save it to a cookie.
We are later using it to resize the images accordingly.
*/
if(
!Cookie.get('screen_width') ||
!Cookie.get('screen_height') ||
Cookie.get('screen_width') != screen.width ||
Cookie.get('screen_height') != screen.height
){
Cookie.set('screen_width', screen.width);
Cookie.set('screen_height', screen.height);
location.reload();
}
Таким образом, вы можете использовать серверный язык для чтения файлов cookie и получения точного размера изображения на экране пользователя.