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

Question

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

Answer 1

Если вы используете 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)

Для размера экрана вы можете использовать объект screen следующим образом:

screen.height;
screen.width;

Answer 2

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

, но коротко:

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

Answer 3

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

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

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

Answer 4

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

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

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

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

Answer 5

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

window.innerWidth, window.innerHeight

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

Answer 6

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

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

Answer 7

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

Answer 8

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

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

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

Answer 9

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

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

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

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

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

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

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

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

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

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

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

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