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

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

Ответ 1

Вы можете получить размер окна или документа с помощью 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;

Ответ 2

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

но вкратце:

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

Пожалуйста, прекратите редактировать этот ответ. Это было отредактировано 20 раз различными людьми, чтобы соответствовать их предпочтению формата кода. Также было отмечено, что это не требуется, если вы хотите ориентироваться только на современные браузеры - если это так, вам нужно только следующее:

const width  = window.innerWidth || document.documentElement.clientWidth || 
document.body.clientWidth,
const height = window.innerHeight|| document.documentElement.clientHeight|| 
document.body.clientHeight;

console.log(width, height);

Ответ 3

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

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

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

Ответ 4

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

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

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

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

Ответ 5

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

window.innerWidth, window.innerHeight

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

Ответ 6

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

Ответ 7

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

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

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

Ответ 8

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

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

Ответ 9

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

Ответ 10

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

Ответ 11

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

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

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

Ответ 12

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

Ответ 13

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

Для этого я написал небольшую 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:)

Ответ 14

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

Ответ 15

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

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

Ответ 16

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

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

var screenWidth = window.screen.availWidth;

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

Screen.availWidth

Ответ 17

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

})()

Ответ 18

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