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

Question

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

Answer 1

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

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

Это соответствует фактическому размеру оболочки.

Answer 2

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

Answer 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 :)

Answer 4

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

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

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

Answer 5

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

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

var screenWidth = window.screen.availWidth;

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

Screen.availWidth

Answer 6

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

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

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

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

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

Answer 7

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

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