Получить размер экрана, текущей веб-страницы и окна браузера


2018

Как я могу получить windowWidth, windowHeight, pageWidth, pageHeight, screenWidth, screenHeight, pageX, pageY, screenX, screenYкоторый будет работать во всех основных браузерах?

снимок экрана с описанием желаемых значений


9
pageHeight (на картинке) вы можете получить с помощью: document.body.scrollHeight
befzz


Может ли это быть актуально? developer.mozilla.org/en-US/docs/Web/API/Window.matchMedia
MEM

3
Интересно: ryanve.com/lab/dimensions
e2-e4

1
Полезное руководство - w3schools.com/jsref/prop_win_innerheight.asp
Дядя Иро

Ответы:


1389

Вы можете получить размер окна или документа с помощью jQuery:

// Size of browser viewport.
$(window).height();
$(window).width();

// Size of HTML document (same as pageHeight/pageWidth in screenshot).
$(document).height();
$(document).width();

Для размера экрана вы можете использовать screenобъект:

window.screen.height;
window.screen.width;

2
Метод jQuery height (), кажется, работает для всех элементов и возвращает число ( 46), а не строку, например, css ('height') ( "46px").
Крис

6
К сожалению, при работе с мобильным Safari jQuery не является идеальным решением этого вопроса. См. Примечание в строке № 13 на github.com/jquery/jquery/blob/master/src/dimensions.js
Джошуа

8
@ 웃 웃웃 웃웃 что ты редактировал в ответе? согласно ревизиям, вы вообще ничего не редактировали
Daniel W.

14
@Marco Kerwitz Хуже всего то, что я набрал «javascript get window window», и содержание этого ответа было в Google. Большой минус один от меня.
Мацей Кравчик

2
ОП СДЕЛАЛ ЗАПРОС, что JQuery является опцией. Всякий, кто ниндзя редактировал исходный вопрос, чтобы исключить его, виноват здесь, а не люди, дающие законные ответы, использующие общепринятую библиотеку JavaScript.
IncredibleHat

963

Здесь есть все, что вам нужно знать: получить размер окна просмотра / окна

но вкратце:

var win = window,
    doc = document,
    docElem = doc.documentElement,
    body = doc.getElementsByTagName('body')[0],
    x = win.innerWidth || docElem.clientWidth || body.clientWidth,
    y = win.innerHeight|| docElem.clientHeight|| body.clientHeight;
alert(x + ' × ' + y);

скрипка

Пожалуйста, прекратите редактировать этот ответ. Это было отредактировано 22 раза различными людьми, чтобы соответствовать их предпочтению формата кода. Также было отмечено, что это не требуется, если вы хотите ориентироваться только на современные браузеры - если это так, вам нужно только следующее:

const width  = window.innerWidth || document.documentElement.clientWidth || 
document.body.clientWidth;
const height = window.innerHeight|| document.documentElement.clientHeight|| 
document.body.clientHeight;

console.log(width, height);

58
Почему нет g = document.body?
платный ботаник

51
@apaidnerd: стандарты, игнорирующие браузеры, такие как IE8, не поддерживают document.body. IE9, однако, делает.
Михаил Миковский

46
@MichaelMikowski Это не правда! Даже IE5 поддерживает document.body.
Nux

32
@nux Я исправлен и подтвердил поддержку в IE8. Однако я знаю, что по крайней мере один браузер, на который мы недавно ориентировались, не поддерживал document.body, и нам пришлось изменить его, чтобы использовать подход getElementsByTagName. Но, думаю, я неправильно запомнил браузер. Сожалею!
Майкл Миковски,

32
Я просто хотел бы отметить, что однобуквенные имена переменных никогда не помогают.
августа

480

Вот кросс-браузерное решение с чистым JavaScript ( Source ):

var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

9
Это лучше, потому что, если вы можете вызвать сценарий достаточно рано в процессе загрузки (часто идея), тогда body elementон вернет значение, undefinedпоскольку dom еще не загружен.
КГВР

16
ХА! Старая тема, но спасибо за это! Я предполагаю, что я один из тех старых "идиотов", которые стараются по крайней мере поддерживать IE8, когда это возможно, в пользу удивительного числа пожилых домашних пользователей, которые никогда не прекратят использовать XP, пока их машины не загорятся. Я устаю задавать вопросы и вместо того, чтобы получить ответ, голосую против меня только с "STOP SUPPORTING IE8 !!" в качестве комментария. Еще раз спасибо! Это решило проблему для меня в чистом увеличении фотографии javascript, которое я сделал. Это немного медленно на IE8, но теперь, по крайней мере, это работает !!! :-)
Рэнди

1
здорово, это намного лучше, чем отдых.
Винаяк Шахдео

95

Не-jQuery способ получить доступное измерение экрана. window.screen.width/heightуже был выставлен, но для отзывчивого веб-дизайна и полноты я думаю, что стоит упомянуть эти атрибуты:

alert(window.screen.availWidth);
alert(window.screen.availHeight);

http://www.quirksmode.org/dom/w3c_cssom.html#t10 :

utilWidth и utilHeight - доступная ширина и высота на экране (исключая панели задач ОС и т. п.).


такая же, как ширина screen.height - в браузере Android Chrome показывается разделенное на соотношение пикселей :(
Darius.V

2
window.screen.availHeightПохоже, что предполагается полноэкранный режим, так что обычный режим экрана заставляет прокручивать (протестировано в Firefox и Chrome).
Suzana

@Suzana_K тогда используйте window.screen.heightвместо этого.
Vallentin

@vallentin window.screen.height не будет работать, но window.innerHeight будет
Сэм

67

Но когда мы говорим об адаптивных экранах и если по какой-то причине мы хотим справиться с этим с помощью jQuery,

window.innerWidth, window.innerHeight

дает правильное измерение. Даже это убирает лишнее пространство полосы прокрутки, и нам не нужно беспокоиться о корректировке этого пространства :)


2
Это должен быть принятый ответ с множеством голосов. Гораздо более полезный ответ, чем принятый в настоящее время, и он также не зависит от jQuery.
developerbmw

5
К сожалению, window.innerWidthи window.innerHeightне в состоянии принять во внимание размер полосы прокрутки. Если полосы прокрутки присутствуют, эти методы возвращают неправильные результаты для размера окна почти во всех настольных браузерах. См stackoverflow.com/a/31655549/508355
hashchange

20

Вы также можете получить ширину и высоту окна, избегая панелей инструментов браузера и других вещей. Это реальная полезная область в окне браузера .

Для этого используйте: window.innerWidth и window.innerHeightсвойства ( см. Документ в w3schools ).

В большинстве случаев это будет лучший способ, например, отображать идеально центрированный плавающий модальный диалог. Это позволяет вам рассчитывать позиции в окне, независимо от того, какую ориентацию разрешения или размер окна использует браузер.


2
Это не поддерживается ни в ie8, ни в ie7, согласно w3schools. Кроме того, вы должны остерегаться, когда вы ссылаетесь на w3schools. См. Meta.stackexchange.com/questions/87678/…
thecarpy

20
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>');

20

Чтобы проверить высоту и ширину текущей загруженной страницы любого веб-сайта, используйте «консоль» или после нажатия «Проверить» .

Шаг 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)

1
Почему это не выбранный ответ?
Юлиан Онофрей

1
@IulianOnofrei, потому что он не полностью отвечает на первоначальный набор вопросов. Шутка, это правильный ответ для меня.
ограбить

innerWidth и innerHeight являются точными только в том случае, если масштаб области просмотра равен 1. Это значение по умолчанию, но его можно непреднамеренно изменить с помощью преобразований CSS.
Виктор Стоддард

«window.innerWidth» в отличие от «screen.width» помог мне определить размер браузера пользователя - спасибо!
Кевин Паджак

10

Если вам нужно действительно пуленепробиваемое решение для ширины и высоты документа ( 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 также обрабатывает размеры окна.

Это необходимо, потому что

jQuery.documentSize предоставляет $.windowWidth()и $.windowHeight(), которые решают эти проблемы. Для получения дополнительной информации, пожалуйста, ознакомьтесь с документацией .


VM2859: 1 Uncaught DOMException: заблокировал фрейм с происхождением « localhost: 12999 » от доступа к фрейму междисциплинарного. (…) Есть ли способ преодолеть это ???
fizmhd

1
Вы не можете получить доступ к фреймам из другого домена, это нарушает политику того же происхождения . Проверьте этот ответ .
hashchange

Это не работает, если вы встраиваете iframe и пытаетесь получить высоту порта просмотра. window.innerHeight, равный высоте документа с ошибкой. Вы не можете получить доступ к кадрам. из другого домена это нереальное решение.
М.Абулсуд

@ M.Abulsoud При условии, что у вас есть доступ к iframe (без нарушения CORS), он работает и входит в набор тестов. Используйте этот синтаксис . Он даже работает с несколькими iframes, вложенными друг в друга - см. Этот пример на Codepen . Если ваша установка работает в целом, но не работает в одном конкретном браузере, это может быть ошибка, о которой я не знаю. Возможно, вы можете открыть вопрос в этом случае? Спасибо.
hashchange

8

Я написал небольшой букмарклет 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, который обновляется при изменении размера вашего окна.


5

В некоторых случаях, связанных с адаптивным макетом, $(document).height()могут возвращаться неправильные данные, отображающие только высоту порта просмотра. Например, когда у некоторого div # wrapper есть height: 100%, этот #wrapper может быть растянут на некоторый блок внутри него. Но его высота все равно будет как высота окна просмотра. В такой ситуации вы можете использовать

$('#wrapper').get(0).scrollHeight

Это представляет фактический размер обертки.


Многие ответили сотнями голосов, но только этот был полезен.
Накилон

5

Полное руководство по размерам экрана

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)

Ссылка: https://help.optimizely.com/Build_Campaigns_and_Experiment/Use_screen_measurements_to_design_for_responsive_breakpoints


4

Я разработал библиотеку для знания реального размера окна просмотра для настольных компьютеров и мобильных браузеров, потому что размеры области просмотра несовместимы между устройствами и не могут полагаться на все ответы этого поста (согласно всем исследованиям, которые я сделал по этому поводу): https: // github .com / pyrsmk / Вт


3

Иногда вам нужно увидеть изменения ширины / высоты при изменении размера окна и внутреннего содержимого.

Для этого я написал небольшой скрипт, который добавляет окно журнала, которое динамически отслеживает все изменения размера и почти сразу же обновляет.

Он добавляет действительный 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 :)


3

С введением 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)


2

Вы можете использовать объект 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значений.


screenX / Y относительно основного экрана, а не относительно самого левого / верхнего экрана. Вот почему значение является отрицательным, если вы находитесь на экране слева от основного экрана.
Том

0

вот мое решение!

// 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();
})();



0

Вот как мне удалось получить ширину экрана в React JS Project:

Если ширина равна 1680, вернуть 570, иначе вернуть 200

var screenWidth = window.screen.availWidth;

<Label style={{ width: screenWidth == "1680" ? 570 : 200, color: "transparent" }}>a  </Label>

Screen.availWidth

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.