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

http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/

но вкратце:

var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0],
    x = w.innerWidth || e.clientWidth || g.clientWidth,
    y = w.innerHeight|| e.clientHeight|| g.clientHeight;
alert(x + ' × ' + y);

Fiddle

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

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

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

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

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

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

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

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

window.innerWidth, window.innerHeight

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• $( window ).height() багги в iOS, с точки зрения бесполезности
• $( window ).width() и $( window ).height() являются ненадежны на мобильных устройствах, поскольку они не 't обрабатывать эффекты мобильного масштабирования.

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

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

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

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

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

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

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

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

EDIT: Теперь стили применяются только к элементу таблицы журналов - не ко всем таблицам - также это решение без jQuery:)

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

Ниже приведен пример того, что он будет возвращать:

Screen {
    availWidth: 1920,
    availHeight: 1040,
    width: 1920,
    height: 1080,
    colorDepth: 24,
    pixelDepth: 24,
    top: 414,
    left: 1920,
    availTop: 414,
    availLeft: 1920
}

Чтобы получить переменную screenWidth, просто используйте screen.width, то же самое с screenHeight, вы просто используете screen.height.

Чтобы получить ширину и высоту окна, это будет screen.availWidth или screen.availHeight соответственно.

Для переменных pageX и pageY используйте window.screenX or Y. Обратите внимание, что это от ОЧЕНЬ ЛЕВЫЙ/ТОП ВАШЕГО ВЛЕВО /TOP -est SCREEN. Поэтому, если у вас есть два экрана ширины 1920, тогда окно 500px слева от правого экрана будет иметь значение X 2420 (1920 + 500). screen.width/height, однако, отобразите ширину или высоту экрана CURRENT.

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

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

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

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

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

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

Свойство свойства WindowPixelRatio возвращает отношение разрешения в физических пикселях к разрешению в пикселях CSS для текущего устройства отображения. Это значение также можно интерпретировать как отношение размеров пикселей: размер одного пикселя CSS к размеру одного физического пикселя. Говоря проще, это говорит браузеру, сколько фактических пикселей экрана должно использоваться для рисования одного пикселя CSS.

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

Невозможно получить уведомление, когда это значение будет изменено (что может произойти, например, если пользователь перетаскивает окно на дисплей с другой плотностью пикселей). Поскольку для обнаружения изменений плотности пикселей не существует обратных вызовов или событий, единственный способ сделать это - периодически проверять значение devicePixelRatio, чтобы узнать, не изменилось ли оно. Просто не делайте этого слишком часто, или вы будете влиять на производительность.

https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio