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

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

screenshot describing which values are wanted

вопрос задан 9.08.2010
turtledove
9359 репутация

17 ответов

  • 1172 рейтинг

    Если вы используете 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;
    ответ дан Ankit Jaiswal, с репутацией 16389, 9.08.2010
  • 840 рейтинг

    Это все, что вам нужно знать:

    http: // andylangton. сотрудничество. uk / статьи / 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);

    Скрипка

    ответ дан sidonaldson, с репутацией 13200, 31.07.2012
  • 385 рейтинг

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

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

var height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
    ответ дан confile, с репутацией 13814, 30.01.2015
  • 79 рейтинг

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

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

    http: // www. QuirksMode. орг / дом / w3c_cssom. html # t10 :

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

    ответ дан DanFromGermany, с репутацией 18604, 20.06.2013
  • 53 рейтинг

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

    window.innerWidth, window.innerHeight

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

    ответ дан Aabha Pandey, с репутацией 576, 22.04.2015
  • 17 рейтинг
    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+';
    ');
document.write(center.y+';
    ');
document.write('
    ');
    ответ дан dude, с репутацией 211, 11.02.2012
  • 16 рейтинг

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

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

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

    ответ дан serfer2, с репутацией 1510, 21.08.2014
  • 13 рейтинг

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

    , шаг 1 : щелкните правой кнопкой мыши, выберите «Проверить», а затем нажмите «Консоль»

    шаг 2 : Убедитесь, что экран вашего браузера не находится в режиме «Развернуть». Если экран браузера находится в режиме «Развернуть», необходимо сначала нажать кнопку «Развернуть» (присутствует в правом или левом верхнем углу) и отменить ее.

    шаг 3 : Теперь напишите следующее после знака «больше» ('& gt;') i. е.

           > window.innerWidth
            output : your present window width in px (say 749)

       > window.innerHeight
            output : your present window height in px (say 359)
    ответ дан solanki..., с репутацией 1170, 9.07.2016
  • 8 рейтинг

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

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

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

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

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

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

    ответ дан hashchange, с репутацией 4293, 4.03.2015
  • 8 рейтинг

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

    Здесь вы найдете информацию, как использовать букмарклет https: // ru. википедия. 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('
    '),e=function(){return'
    width: '+i(window).width()+" height: "+i(window).height()+""},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 = $('
    ')

    getWindowSize = ->
      '
    width: ' + $(window).width() + ' height: ' + $(window).height() + ''

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

    ответ дан Andi Giga, с репутацией 1298, 31.03.2016
  • 5 рейтинг

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

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

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

    ответ дан Akim Kelar, с репутацией 470, 15.10.2015
  • 4 рейтинг

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

    ответ дан pyrsmk, с репутацией 298, 13.04.2016
  • 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
    screen x " +" window x " +" document
    .documentElement x " +" document.body x " ; 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 );

    РЕДАКТИРОВАТЬ: Теперь стили применяются только к элементу таблицы регистратора - не ко всем таблицам - также это решение 3894676001 без jQuery :)

    ответ дан jave.web, с репутацией 6008, 2.03.2015
  • 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.

    ответ дан Zoweb, с репутацией 360, 6.11.2015
  • 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();
})();
    ответ дан does_not_exist, с репутацией , 13.09.2017
  • -1 рейтинг

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

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

    n = "px
    "  /* 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: // разработчик. Mozilla. org / en-US / docs / Web / API / Window / devicePixelRatio

    ответ дан Cryptopat, с репутацией 1453, 3.02.2018
  • -2 рейтинг

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

    ответ дан nikksan, с репутацией 859, 1.06.2018