Отримайте розмір екрана, поточної веб-сторінки та вікна браузера


2016

Як я можу отримати windowWidth, windowHeight, pageWidth, pageHeight, screenWidth, screenHeight, pageX, pageY, screenX, screenYякий буде працювати у всіх основних браузерах?

скріншот, що описує, які значення потрібно шукати


9
pageHeight (на знімку), ви можете отримати: document.body.scrollHeight
befzz


Можливо, це також актуально? developer.mozilla.org/en-US/docs/Web/API/Window.matchMedia
MEM


1
Корисний підручник - w3schools.com/jsref/prop_win_innerheight.asp
дядько Ірог

Відповіді:


1387

Ви можете отримати розмір вікна або документа за допомогою 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
Спосіб jQuery висота (), здається, працює для всіх елементів, і повертає число ( 46), а не рядок, як css ('height') ( "46px").
Кріс

6
При роботі з мобільним Safari, на жаль, jQuery не є ідеальним рішенням цього питання. Дивіться примітку до рядка №13 за адресою github.com/jquery/jquery/blob/master/src/dimensions.js
Джошуа

8
@ 웃 웃웃 웃웃 що ти редагував у відповіді? згідно з редакцією, ви взагалі нічого не редагували
Daniel W.

14
@Marco Kerwitz Найгірше те, що я набрав "javascript get width window", а зміст цієї відповіді був у Google. Великий мінус один від мене.
Maciej Krawczyk

2
OP DID ЗАПИТАТИ, що jquery - це варіант. Той, хто ніндзя редагував оригінальне запитання, щоб виключити його, винен тут, а не люди, які дають законні відповіді, використовуючи всесвітньо прийняту бібліотеку javascript.
IncredibleHat

962

Тут є все, що потрібно знати: Отримати вікно перегляду / розмір вікна

але коротше:

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

Скрипка

Будь ласка, припиніть редагувати цю відповідь. Зараз його редагували 22 рази різними людьми, щоб відповідати їхнім параметрам формату коду. Також було зазначено, що це не потрібно, якщо ви хочете орієнтуватися лише на сучасні браузери - якщо так, вам потрібні лише такі:

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

console.log(width, height);

58
Чому ні g = document.body?
платний ботанік

51
@apaidnerd: Стандарти, що забороняють браузери, такі як IE8, не підтримують document.body. IE9, однак, робить.
Майкл Міковський

46
@MichaelMikowski Це неправда! Навіть підтримує IE5 document.body.
Nux

32
@nux я виправлений, і я підтвердив підтримку в IE8. Я знаю, що хоча б один браузер, на який ми націлювали нещодавно, не підтримував document.body, і нам довелося змінити, щоб використовувати підхід getElementsByTagName. Але я здогадуюсь, що я перечитав браузер. Вибачте!
Майкл Міковський

32
Я хотів би дуже спокійно зауважити, що назви змінних з однієї літери ніколи не корисні.
wybe

480

Ось перехресне рішення браузера з чистим JavaScript ( Джерело ):

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

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

9
Це краще, тому що якщо ви зможете викликати скрипт досить рано в процесі завантаження (часто ідея), тоді body elementповернеться значення, undefinedоскільки dom ще не завантажений.
КГВР

16
ХА! Стара нитка, але дякую за це! Я здогадуюсь, я один із тих старих "ідіотів", які намагаються підтримати принаймні повернення до IE8, коли це можливо, на користь дивовижної кількості старих домашніх користувачів, які ніколи не припинять використовувати XP, поки їх машини не загоряться. Я втомився задавати питання, а замість того, щоб отримувати відповідь, отримую голосування лише "ЗАСТОСУЙТЕ ПІДТРИМКА IE8 !!" як коментар. Ще раз дякую! Це вирішило для мене проблему із чистим фото-зумом Javascript. Це трохи повільно на IE8, але тепер принаймні це працює !!! :-)
Ренді

1
чудово, це набагато краще, ніж відпочинок.
vinayak shahdeo

95

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

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

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

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


те саме, що і ширина екрана. висота - на андроїд хромується веб-переглядач, розділений на співвідношення пікселів :(
Darius.V

2
window.screen.availHeightСхоже, передбачає повноекранний режим, так що звичайний екранний режим примушує прокручувати (тестується в Firefox та Chrome).
Сузана

@Suzana_K тоді використовуйте window.screen.heightзамість цього.
валентін

65

Але коли ми говоримо про чуйні екрани і якщо ми хочемо з якоюсь причиною обробити це за допомогою jQuery,

window.innerWidth, window.innerHeight

дає правильне вимірювання. Навіть це видаляє додатковий простір смуги прокрутки, і нам не потрібно турбуватися про коригування цього місця :)


2
Це має бути прийнятою відповіддю з великою кількістю анонсів. Набагато корисніша відповідь, ніж зараз прийнята відповідь, і вона також не залежить від jQuery.
розробникbmw

5
На жаль, window.innerWidthі window.innerHeightне врахувати розмір смуги прокрутки. Якщо є смуги прокрутки, ці методи повертають неправильні результати щодо розміру вікна майже у всіх браузерах настільних ПК. Див stackoverflow.com/a/31655549/508355
hashchange

20

Ви також можете отримати ширину та висоту WINDOW, уникаючи панелей інструментів браузера та інших речей. Це реальна корисна область у вікні браузера .

Для цього використовуйте: window.innerWidth і window.innerHeightвластивості ( див. Doc у w3schools ).

У більшості випадків це буде найкращий спосіб, наприклад, відобразити ідеально по центру плаваючий модальний діалог. Це дозволяє обчислювати позиції у вікні, незалежно від того, яку орієнтацію та розмір вікна використовує браузер.


2
На думку w3schools, це не підтримується в ie8, ні ie7. Крім того, ви повинні стежити, коли ви посилаєтесь на w3schools. Дивіться meta.stackexchange.com/questions/87678/…
thecarpy

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

20

Щоб перевірити висоту та ширину поточної завантаженої сторінки будь-якого веб-сайту за допомогою "консолі" або після натискання "Оглянути" .

крок 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)

1
Чому це не обрана відповідь?
Юліан Онофрей

1
@IulianOnofrei, оскільки він не відповідає повністю на початковий набір питань. Анекдот, це правильна відповідь для мене.
пограбувати

innerWidth і innerHeight точні лише в тому випадку, якщо шкала вікна перегляду дорівнює 1. Це за замовчуванням, але його можна ненавмисно змінити за допомогою перетворень css.
Віктор Стоддард

"window.innerWidth" на відміну від "screen.width" працював на мене, щоб визначити розмір браузера користувача - дякую!
Кевін Паяк

10

Якщо вам потрібне справжнє бронезахисне рішення для ширини та висоти документа ( 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 також обробляє розміри вікон.

Це необхідно тому, що

jQuery.documentSize надає $.windowWidth()та $.windowHeight()вирішує ці проблеми. Для отримання додаткової інформації перегляньте документацію .


VM2859: 1 Uncaught DOMException: Заблоковано кадр з початковим кодом " localhost: 12999 " від доступу до кадру з перехресним походженням. (...) Чи є спосіб перейти до цього ???
fizmhd

1
Ви не можете отримати доступ до iframes з іншого домену, це порушує політику того самого походження . Перевірте цю відповідь .
hashchange

Це не працює, якщо ви вставляєте кадр iframe та намагаєтесь отримати висоту порту перегляду. window.innerHeight дорівнює висоті документа, яка є помилкою. Ви не можете отримати доступ до кадрів. з іншого домену, це не можливе рішення.
М.Абулсуд

@ M.Abulsoud За умови, що у вас є доступ до iframe (немає порушення CORS), він працює і охоплюється тестовим набором. Використовуйте цей синтаксис . Він навіть працює з декількома рамками, вкладеними один у одного - див. Цей приклад на Codepen . Якщо ваша установка працює загалом, але не працює в одному конкретному браузері, це може бути помилка, про яку я не знаю. Можливо, ви можете відкрити питання в такому випадку? Дякую.
хеш-обмін

8

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


5

У деяких випадках, пов’язаних із чуйним компонуванням, $(document).height()можна повернути неправильні дані, які відображають лише висоту портів перегляду. Наприклад, коли якась оболонка div # має висоту: 100%, цей # wrapper можна розтягнути на якийсь блок всередині нього. Але висота все одно буде схожа на висоту огляду. У такій ситуації ви можете скористатися

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

Це відображає фактичний розмір обгортки.


Так багато відповідей сотнями оновлень, але тільки ця була корисна.
Накілон

5

Повне керівництво щодо розмірів екрана

JavaScript

Для висоти:

document.body.clientHeight  // Inner height of the HTML document body, including padding 
                            // but not the horizontal scrollbar height, border, or margin

screen.height               // Device screen height (i.e. all physically visible stuff)
screen.availHeight          // Device screen height minus the operating system taskbar (if present)
window.innerHeight          // The current document's viewport height, minus taskbars, etc.
window.outerHeight          // Height the current window visibly takes up on screen 
                            // (including taskbars, menus, etc.)

Примітка: Коли вікно буде максимізовано, це дорівнює екрану.availHeight

Для ширини:

document.body.clientWidth   // Full width of the HTML page as coded, minus the vertical scroll bar
screen.width                // Device screen width (i.e. all physically visible stuff)
screen.availWidth           // Device screen width, minus the operating system taskbar (if present)
window.innerWidth           // The browser viewport width (including vertical scroll bar, includes padding but not border or margin)
window.outerWidth           // The outer window width (including vertical scroll bar,
                            // toolbars, etc., includes padding and border but not margin)

Jquery

Для висоти:

$(document).height()    // Full height of the HTML page, including content you have to 
                        // scroll to see

$(window).height()      // The current document's viewport height, minus taskbars, etc.
$(window).innerHeight() // The current document's viewport height, minus taskbars, etc.
$(window).outerHeight() // The current document's viewport height, minus taskbars, etc.                         

Для ширини:

$(document).width()     // The browser viewport width, minus the vertical scroll bar
$(window).width()       // The browser viewport width (minus the vertical scroll bar)
$(window).innerWidth()  // The browser viewport width (minus the vertical scroll bar)
$(window).outerWidth()  // The browser viewport width (minus the vertical scroll bar)

Довідка: https://help.optimizely.com/Build_Campaigns_and_Experiment/Use_screen_measurements_to_design_for_responsive_breakpoints


4

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


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

EDIT: Тепер стилі застосовуються лише до елемента таблиці реєстратора - не до всіх таблиць - також це рішення без jQuery :)


3

З введенням globalThisв ES2020 ви можете використовувати такі властивості.

Для розміру екрана:

globalThis.screen.availWidth 
globalThis.screen.availHeight

Для розміру вікна

globalThis.outerWidth
globalThis.outerHeight

Для зміщення:

globalThis.pageXOffset
globalThis.pageYOffset

... і так далі.

alert("Screen Width: "+ globalThis.screen.availWidth +"\nScreen Height: "+ globalThis.screen.availHeight)


2

Ви можете використовувати об'єкт 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то вікно 500px зліва від правого екрана має значення X 2420(1920 + 500). screen.width/heightоднак відобразити СУЧАСНУ ширину або висоту екрана

Щоб отримати ширину та висоту вашої сторінки, використовуйте jQuery $(window).height()або $(window).width().

Знову використовуючи jQuery, використовуйте $("html").offset().topі $("html").offset().leftдля своїх pageXі pageYцінностей.


0

ось моє рішення!

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



0

Ось як мені вдалося отримати ширину екрану в React JS Project:

Якщо ширина дорівнює 1680, тоді повернути 570, повернути 200

var screenWidth = window.screen.availWidth;

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

Screen.availWidth

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.