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

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

screenshot describing which values are wanted

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)

для размера экрана вы можете использовать


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

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

Скрипка


вот кросс-браузерное решение с pure 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.innerWidth и window.innerHeight свойства (см. doc в 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)

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

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

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

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

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

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

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

никогда, начиная с версии 1.1.0, с помощью jQuery.documentSize также обрабатывает размеры окон.

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

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

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


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


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

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

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


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


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

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

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


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

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

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. Обратите внимание, что это СЛЕВА/СВЕРХУ Вашего левого/верхнего экрана. Итак, если у вас есть два экрана width 1920 тогда окно 500px слева от правого экрана будет иметь значение X 2420 (1920+500). screen.width/height, однако, отображать ширину или высоту текущего экрана.

чтобы получить ширину и высоту вашей страницы, Используйте 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();
})();

теперь мы можем безопасно использовать только собственный javascript window 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/docs/Web/API/Window/devicePixelRatio


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