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

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

но вкратце:

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

Скрипка.

Пожалуйста, прекратите редактировать этот ответ. Он был отредактирован уже 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);

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

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

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

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

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

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

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

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

window.innerWidth, window.innerHeight

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

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

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

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

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

Шаг 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]3 тоже.

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

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

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

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

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

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

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

• `$( окно ).высота () - это багги в iOS, до такой степени, что бесполезно
• $( окно ).ширина() и $( окно ).высота() в [ненадежной на мобильный], [5], потому что они Дон'т справиться с последствиями мобильный масштабирование.

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

[5]: и quot https://stackoverflow.com/questions/14388367/mobile-safari-window-height-url-bar-discrepancy/31655549#31655549 мобильный сафари $(окно).высота (), в строке URL нестыковка – переполнение стека и"

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

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

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

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

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

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

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

Он добавляет корректный HTML с фиксированном положении и высокий Z-индекс, но достаточно мал, так что вы можете:

• использовать его на фактическое сайт
• использовать его для тестирования мобильный/отзывчивый вид

<БР>протестировано на: Хром 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 {
    availWidth: 1920,
    availHeight: 1040,
    width: 1920,
    height: 1080,
    colorDepth: 24,
    pixelDepth: 24,
    top: 414,
    left: 1920,
    availTop: 414,
    availLeft: 1920
}

Чтобы получить screenWidth переменная, просто используйте экране.ширинасscreenHeight, вы бы просто использоватьэкраном.высота`.

Для получения ширины окна и высоты экрана.availWidth " или " экран.availHeight` соответственно.

Для pageX и pageY переменных, используйте окно.screenX или Y. Обратите внимание, что это с слева/вверху слева/вверху-есть экран. Так что если у вас есть два экрана в ширину 1920 окно 500 пикселей от левой границы правой части экрана бы х значение2420 (1920+500). `экрана.ширина/высота, однако, отображения текущего экрана's ширина или высота.

Чтобы получить ширину и высоту страницы, использовать jQuery'ы $(окно).высота() или $(окно).ширина().

Снова используете jQuery, используйте $("в формате HTML и").смещение().Top и $("в формате HTML и").смещение().левый для значений 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();
})();

в

Это, как мне удалось получить ширину экрана в реагирует проекта на JS:

Если ширина равна 1680 затем вернуться 570 еще вернуть 200

var screenWidth = window.screen.availWidth;

a  

Экран.availWidth