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

avatar
turtledove
9 августа 2010 в 06:28
1819079
20
2240

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

screenshot describing which values are wanted

Источник
befzz
11 декабря 2013 в 20:29
12

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

MEM
22 июля 2014 в 16:18
0

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

Breaking not so bad
31 июля 2014 в 09:59
3

Интересно: ryanve.com/lab/dimensions

Uncle Iroh
1 августа 2016 в 12:55
1

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

Roy Prins
1 марта 2017 в 08:48
0

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

Ответы (20)

avatar
Ankit Jaiswal
9 августа 2010 в 06:39
1545

Вы можете получить размер окна или документа с помощью 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;
turtledove
10 августа 2010 в 02:25
1

спасибо, а есть ли способ получить pageX, pageY, screenX, screenY?

Chris
6 февраля 2013 в 16:02
3

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

Joshua
19 июня 2013 в 17:10
8

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

Matt Zelenak
26 января 2014 в 21:52
0

@turtledove, конечно, цепляйтесь вместе. Req jQuery: $ (document) .ready (function () {var window_height = $ (this). (Window) .height () + "px"; var sizes = $ ("body"). Css ("height", window_height); var window_width = $ (this). (window) .width () + "px"; var sizes = $ ("body"). css ("width", window_width);})

Daniel W.
28 января 2014 в 15:31
8

@ 웃 웃웃 웃웃 что ты отредактировал в ответе? по ревизиям вы вообще ничего не редактировали

Ankit Jaiswal
14 апреля 2014 в 04:43
1

@mrplants Это все в пикселях.

Dariux
30 января 2015 в 09:49
1

screen.height - в браузере Android по умолчанию получает одно значение, в браузере Android Chrome - другое значение. Я думаю, в хроме высота делится на соотношение пикселей. Например, если высота равна 800, а соотношение пикселей - 1,5, то для хрома это 800 / 1,5 = 533.

mseddon
31 июля 2015 в 08:27
0

@MarcoKerwitz Я достаточно хорошо знаком с исходным кодом jquery. Мне повезло.

sigod
15 сентября 2015 в 08:28
0

@DanFromGermany В конце файла были две новые строки. Он удалил одну из них.

Ankit Jaiswal
21 апреля 2016 в 01:27
0

@Alberto исходный вопрос, когда его спросили, касался решения JQuery и с тех пор обновлялся несколько раз.

Alberto Bonsanto
21 апреля 2016 в 01:31
1

Если это так, почему ваш ответ, который включает jQuery, по-прежнему считается правильным, если он устарел? Я не пытаюсь вести себя глупо, меня просто раздражает каждый раз, когда я нахожу что-то подобное

Adi Prasetyo
30 апреля 2016 в 16:21
0

не могли бы вы обновить объяснение области просмотра браузера, HTML-документа и экрана?

Maciej Krawczyk
11 июня 2016 в 07:43
22

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

Adam Arold
3 января 2017 в 14:23
1

Прекратите давать конкретные ответы на jquery. OP НЕ запрашивал ответ jquery.

Ankit Jaiswal
18 января 2017 в 02:14
1

@AdamArold Прекратите комментировать, не зная фактов. Исходный вопрос был специально задан для конкретного ответа JQuery и с тех пор несколько раз редактировался модераторами. Есть и другие ответы с ванильными решениями javascript, используйте их, если вам не нравится JQuery.

Adam Arold
18 января 2017 в 12:11
0

Я знаю факты. Прекратите предполагать, что я этого не делаю. факт состоит в том, что в ответе нет тега jquery, поэтому ваш ответ неуместен. Кроме того, изначально вопрос также не содержал тега jquery . Он был добавлен позже кем-то, но без надобности.

GreySage
22 июня 2017 в 18:49
0

Обратите внимание, что если вы измените разрешение экрана, возвращаемые значения ширины / высоты экрана соответственно изменятся. Другими словами, вы получаете НЕ физические размеры, а, скорее, размеры в пикселях.

BryanGrezeszak
10 августа 2017 в 23:47
1

@AdamArold - На самом деле, как бы мне ни не нравился этот факт, исходный вопрос конкретно указывал "или jquery" в своем тексте. Я тоже ненавижу jQuery, но мне трудно выпороть ответчика, когда OP специально указал это как допустимый ответ.

IncredibleHat
3 февраля 2018 в 14:03
5

OP СПРОСИЛ , что jquery является опцией. Тот, кто ниндзя редактировал исходный вопрос, чтобы исключить его, виноват здесь, а не люди, дающие законные ответы, используя всемирно признанную библиотеку javascript.

M.Abulsoud
12 декабря 2018 в 13:45
0

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

Nick Steele
1 февраля 2020 в 21:13
1

В 2020 году спрашивать, как что-то делать с JQuery, действительно, очень раздражает ... Больше разработчиков не используют его, чем используют. Мы можем делать людей лучше. Мы можем лучше.

Nick Steele
5 марта 2020 в 14:21
0

Хорошая точка зрения. Я, вероятно, должен был сказать, что получение высоко оцененных ответов с участием устаревшей библиотеки, которая больше не актуальна для всех разработчиков, помогает в поиске ответа снижает ценность всей платформы, продлевает срок прекращения устаревшего программного обеспечения и ошибочно указывает новым членам сообщества что старые библиотеки более актуальны, чем они есть. Обмену стеками нужна функция амортизации или что-то в этом роде.

Nick Steele
5 марта 2020 в 14:25
1

Теперь, когда я думаю об этом ... Вау. Этому ответу 10 лет. Даже до IE11. В сетях обмена стеками должна быть какая-то функция устаревания. Через несколько лет это сокрушит всю платформу. Такие популярные ответы требуют много времени, чтобы сообщество проголосовало за что-то еще. Нам нужен "обесцененный" тег или что-то в этом роде.

avatar
2 апреля 2021 в 08:27
12

Графический ответ: Graphical version of the answer (............)

avatar
Kamil Kiełczewski
9 июня 2020 в 08:39
42

Полный 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 в приведенном ниже решении - но в целом это может быть сложно для этого case)
  • для простоты я предполагаю, что <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: coderhelper snippet gives wrong values for screenX-Y, 
  but if you copy this 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 на MacOs High Sierra

WinEunuuchs2Unix
30 сентября 2021 в 00:03
0

Спасибо за современный ответ. Я надеюсь, что за него проголосуют дальше, в верхней части страницы. Быстрый вопрос, как повторно запустить функцию при изменении размера окна?

avatar
Prashant Gupta
11 января 2020 в 14:35
8

С введением 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)
avatar
Hamza Iftikhar
3 декабря 2019 в 09:26
11

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

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_Experiments/Use_screen_measurements_to_design_for_responsive_breakpoints

avatar
Prashant Yalatwar
26 июня 2019 в 06:59
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

avatar
user8202629
13 сентября 2017 в 04:36
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();
})();
user8202629
13 сентября 2017 в 04:47
1

! экран-ок

avatar
solanki...
9 июля 2016 в 04:22
21

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

шаг 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)
avatar
pyrsmk
13 апреля 2016 в 08:16
4

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

avatar
Andi Giga
31 марта 2016 в 09:25
8

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

Здесь вы найдете информацию о том, как использовать букмарклет. https://en.wikipedia.org/wiki/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, который обновляется при изменении размера окна.

avatar
Zach Barham
6 ноября 2015 в 04:47
2

Вы можете использовать объект Экран, чтобы получить это.

Ниже приведен пример того, что он вернет:

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, то окно в 500 пикселей слева от правого экрана будет иметь значение X 2420 (1920 + 500). screen.width/height, однако отображать ТЕКУЩУЮ ширину или высоту экрана.

Чтобы получить ширину и высоту вашей страницы, используйте jQuery $(window).height() или $(window).width().

Снова используя jQuery, используйте $("html").offset().top и $("html").offset().left для значений pageX и pageY.

Tom
4 июня 2020 в 21:23
0

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

avatar
Akim Kelar
15 октября 2015 в 08:30
5

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

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

Фактический размер оболочки.

avatar
Aabha Pandey
22 апреля 2015 в 07:29
75

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

window.innerWidth, window.innerHeight

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

avatar
hashchange
4 марта 2015 в 22:30
10

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

У него только одна цель: всегда возвращать правильный размер документа, даже в сценариях, когда jQuery и другие методы не работают. Несмотря на название, вам не обязательно использовать jQuery - он написан на обычном Javascript и работает без jQuery.

Использование:

var w = $.documentWidth(),
    h = $.documentHeight();

для глобального document. Для других документов, например во встроенном iframe, к которому у вас есть доступ, передайте документ в качестве параметра:

var w = $.documentWidth( myIframe.contentDocument ),
    h = $.documentHeight( myIframe.contentDocument );

Обновление: теперь для размеров окна тоже

Начиная с версии 1.1.0, jQuery.documentSize также обрабатывает размеры окон.

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

jQuery.documentSize предоставляет $.windowWidth() и $.windowHeight(), которые решают эти проблемы. Подробнее см. в документации.

avatar
jave.web
2 марта 2015 в 16:05
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 :)

avatar
confile
30 января 2015 в 17:44
527

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

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

var height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
dgo
14 августа 2015 в 19:00
11

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

Randy
15 сентября 2016 в 20:32
19

Ха! Старая ветка, но спасибо за это! Я полагаю, что я один из тех старых «идиотов», которые пытаются поддержать хотя бы возврат к IE8, когда это возможно, в интересах удивительного количества старых домашних пользователей, которые никогда не перестанут использовать XP, пока их машины не загорятся. Я устаю задавать вопросы, и вместо того, чтобы получать ответ, я проигрываю голосом только с фразой «ПРЕКРАТИТЬ ПОДДЕРЖКУ IE8 !!» в качестве комментария. Еще раз спасибо! Это решило для меня проблему с масштабированием фотографий на чистом javascript, которое я сделал. Это немного медленнее на IE8, но теперь, по крайней мере, он работает !!! :-)

WinEunuuchs2Unix
29 сентября 2021 в 23:59
0

@Randy Разве старая машина с Windows XP не может просто запустить новую версию Fire-Fox или что-то еще?

Randy
1 октября 2021 в 04:57
0

@ WinEunuuchs2Unix Поскольку в 2016 году я прокомментировал, что ответ решил мою проблему, почему переключение браузеров имеет значение? Вы не можете сказать посетителям вашего сайта переключить браузер. Если сайт не работает, они уходят. И НЕТ <вы не можете загрузить последнюю версию браузера Firefox на компьютер с Windows XP.

avatar
serfer2
21 августа 2014 в 10:44
21

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

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

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

avatar
Daniel W.
20 июня 2013 в 10:06
101

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

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

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

availWidth и availHeight - доступные ширина и высота на экран (за исключением панелей задач ОС и т. п.).

avatar
sidonaldson
31 июля 2012 в 15:52
1060

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

а вкратце:

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

Fiddle

Пожалуйста, прекратите редактировать этот ответ. Теперь его редактировали 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);
a paid nerd
27 января 2014 в 03:32
62

Почему не g = document.body?

Michael Mikowski
27 января 2014 в 22:34
52

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

Nux
27 сентября 2014 в 19:48
48

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

Michael Mikowski
28 сентября 2014 в 01:07
33

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

wybe
2 июня 2018 в 23:27
39

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

WinEunuuchs2Unix
29 сентября 2021 в 23:57
0

Это второй раз за два дня, когда я вижу «современный браузер» в ответе, написанном в 2012 году. Можно ли сейчас предположить, что 2022 год не за горами, ответ будет для «всех» браузеров?

Randy
1 октября 2021 в 04:53
0

Единственное раздражение заключается в том, что некоторые браузеры подойдут (то есть его невозможно даже поймать с помощью конструкции try / catch), если у вас даже есть ссылка на несуществующие свойства документа или окна. Это означает, что вам почти нужно обнаружить браузер и использовать document.write для динамического добавления кода, когда это безопасно. Нижняя линия. совместимость со всеми браузерами, начиная с IE-8, становится рутиной, от которой даже лучшие из нас готовы отказаться.

avatar
dude
11 февраля 2012 в 04:25
22
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>');