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

вопрос создан в Wed, Mar 29, 2017 12:00 AM

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

снимок экрана, описывающий, какие значения нужны

    
1832
  1. Хорошая картинка. Все вопросы должны и ответы должны быть такими.
    2013-06-12 08: 57: 20Z
  2. pageHeight (на картинке) вы можете получить с помощью: document.body.scrollHeight
    2013-12-11 20: 29: 56Z
  3. 2014-05-26 23: 06: 04Z
  4. Интересно: ryanve.com/lab/dimensions
    2014-07-31 09: 59: 21Z
  5. Полезное руководство - w3schools.com /jsref/prop_win_innerheight.asp
    2016-08-01 12: 55: 34Z
17 ответов                              17                         

Если вы используете 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;
    
1273
2018-11-16 06: 49: 09Z
  1. Кажется, что метод jQuery height () работает для всех элементов и возвращает число (46), а не строку типа css ('height') ("46px").
    2013-02-06 16: 02: 59Z
  2. При работе с мобильным Safari, к сожалению, jQuery не является идеальным решением этого вопроса. См. Примечание в строке № 13 по адресу github.com/jquery/jquery/. BLOB /Master /SRC /dimensions.js
    2013-06-19 17: 10: 01Z
  3. @ 웃 웃웃 웃웃 что вы редактировали в ответе? согласно ревизиям, вы вообще ничего не редактировали
    2014-01-28 15: 31: 26Z
  4. @ Marco Kerwitz Хуже всего то, что я набрал "javascript get window window", и содержание этого ответа было в Google. Большой минус один от меня.
    2016-06-11 07: 43: 49Z
  5. Опция DID ASK , что jquery является опцией. Всякий, кто ниндзя редактировал исходный вопрос, чтобы исключить его, виноват здесь, а не люди, дающие законные ответы, использующие общепринятую библиотеку JavaScript.
    2018-02-03 14: 03: 09Z

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

но вкратце:

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

Fiddle

    
892
2019-03-20 15: 39: 09Z
  1. Почему бы не g = document.body?
    2014-01-27 03: 32: 55Z
  2. @ apaidnerd: стандарты, игнорирующие браузеры, такие как IE8, не поддерживают document.body. IE9, однако, делает.
    2014-01-27 22: 34: 14Z
  3. @ MichaelMikowski Это не так! Даже IE5 поддерживает document.body.
    2014-09-27 19: 48: 41Z
  4. @ nux Я исправлен, и я подтвердил поддержку в IE8. Однако я знаю, что по крайней мере один браузер, на который мы недавно ориентировались, не поддерживал document.body, и нам пришлось изменить его, чтобы использовать подход getElementsByTagName. Но, думаю, я неправильно запомнил браузер. Извините!
    2014-09-28 01: 07: 04Z
  5. Я просто хотел бы очень кратко отметить, что однобуквенные имена переменных никогда не помогают.
    2018-06-02 23: 27: 42Z

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

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

var height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
    
436
2015-03-29 13: 46: 01Z
  1. Это лучше, потому что, если вы можете вызвать сценарий достаточно рано в процессе загрузки (часто это идея), то body element вернет значение undefined как Дом еще не загружен.
    2015-08-14 19: 00: 07Z
  2. HA! Старая тема, но спасибо за это! Я предполагаю, что я один из тех старых "идиотов", которые стараются по крайней мере поддерживать IE8, когда это возможно, в пользу удивительного числа пожилых домашних пользователей, которые никогда не прекратят использовать XP, пока их машины не загорятся. Я устаю задавать вопросы и вместо того, чтобы получить ответ, голосую против меня только с "STOP SUPPORTING IE8 !!" в качестве комментария. Еще раз спасибо! Это решило проблему для меня в чистом увеличении фотографии javascript, которое я сделал. Это немного медленно на IE8, но теперь, по крайней мере, это работает !!! : -)
    2016-09-15 20: 32: 26Z
  3. здорово, это намного лучше, чем остальные.
    2019-03-25 06: 57: 55Z

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

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

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

  

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

    
86
2014-02-27 22: 29: 35Z
  1. так же, как ширина screen.height - в браузере Android Chromeпоказывает разделенное на соотношение пикселей: (
    2015-01-30 09: 52: 32Z
  2. window.screen.availHeight, по-видимому, принимает полноэкранный режим, так что нормальный режим экрана вызывает прокрутку (протестировано в Firefox и Chrome).
    2015-03-21 15: 13: 09Z
  3. @ Suzana_K, вместо этого используйте window.screen.height.
    2016-04-02 01: 40: 58Z

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

window.innerWidth, window.innerHeight

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

    
60
2015-04-22 07: 29: 55Z
  1. Это должен быть принятый ответ с большим количеством голосов. Гораздо более полезный ответ, чем принятый в настоящее время, и он также не зависит от jQuery.
    2015-04-29 23: 25: 52Z
  2. К сожалению, window.innerWidth и window.innerHeight не в состоянии принять во внимание размер полосы прокрутки. Если полосы прокрутки присутствуют, эти методы возвращают неправильные результаты для размера окна почти во всех настольных браузерах. См. stackoverflow.com/a/31655549/508355
    2015-08-25 11: 13: 19Z

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

шаг 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)
    
18
2016-07-09 04: 22: 32Z
  1. Почему это не выбранный ответ?
    2016-10-08 18: 30: 05Z
  2. @ IulianOnofrei, поскольку он не полностью отвечает первоначальному набору вопросов. Шутка, это правильный ответ для меня.
    2017-01-18 15: 06: 34Z
  3. innerWidth и innerHeight являются точными только в том случае, если масштаб области просмотра равен 1. Это значение по умолчанию, но его можно случайно изменить при помощи преобразования css.
    2018-03-14 00: 49: 54Z
  4. "window.innerWidth" в отличие от "screen.width" помог мне определить размер браузера пользователя - спасибо!
    2018-07-24 11: 02: 10Z

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

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

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

    
17
2014-08-21 10: 44: 03Z
  1. Это не поддерживается ни в ie8, ни в ie7, согласно w3schools. Кроме того, вы должны остерегаться, когда вы ссылаетесь на w3schools. См. meta.stackexchange.com/questions/87678/...
    2015-02-04 06: 31: 43Z
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>');
    
17
2015-11-24 19: 31: 20Z

Если вам нужно по-настоящему пуленепробиваемое решение для ширины и высоты документа (pageWidth и pageHeight на рисунке), вы можете использовать мой плагин, jQuery.documentSize .

У него только одна цель: всегда возвращать правильный размер документа, даже в тех случаях, когда jQuery и другие методы fail . Несмотря на его название, вам не обязательно использовать 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(), которые решают эти проблемы. Для получения дополнительной информации, пожалуйста, ознакомьтесь с документация .

    
10
2017-05-23 12: 26: 36Z
  1. VM2859: 1 необработанное DOMException: заблокирован фрейм с источником " localhost: 12999 "от доступа к фрейму перекрестного происхождения. (…) есть ли способ преодолеть это ???
    2016-07-13 10: 44: 44Z
  2. Вы не можете получить доступ к фреймам из другого домена, это нарушает политика того же происхождения . Ознакомьтесь с этим ответом .
    2016-07-13 10: 53: 35Z
  3. Это не работает, если вы встраиваете iframe и пытаетесь получить высоту порта представления. window.innerHeight, равный высоте документа с ошибками. Вы не можете получить доступ к кадрам. из другого домена это неосуществимое решение.
    2018-12-12 13: 47: 34Z
  4. @ M.Abulsoud При условии, что у вас есть доступ к iframe (без нарушения CORS), он работает и входит в набор тестов. Используйте это синтаксис . Он даже работает с несколькими вложенными друг в друга фреймами - см. Этот пример в Codepen . Если ваша установка работает в целом, но не работает в одном конкретном браузере, это может быть ошибка, о которой я не знаю. Возможно, вы можете открыть вопрос в этом случае? Спасибо.
    2018-12-12 16: 24: 15Z

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

    
8
2016-03-31 09: 33: 26Z

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

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

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

    
5
2015-10-15 08: 30: 58Z
  1. Очень многие ответили сотнями голосов, но только этот был полезен.
    2018-02-12 08: 06: 03Z

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

    
4
2016-04-13 08: 16: 56Z

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

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

Он добавляет действительный 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
2015-12-01 12: 17: 32Z

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

    
2
2016-03-11 15: 52: 21Z

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

р>

// 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
2017-09-13 04: 41: 57Z
  1. 2017-09-13 04: 47: 04Z

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

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

var screenWidth = window.screen.availWidth;

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

Screen.availWidth

    
0
2019-06-26 07: 19: 29Z

Теперь мы можем безопасно использовать один собственный javascript-окно api во всех браузерах без контекста окна.

Синтаксис довольно понятен!

р>

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 /документы /Web /API /Window /devicePixelRatio

    
- 1
2018-02-03 19: 13: 08Z
источник размещен Вот