Питання Отримайте розмір екрана, поточну веб-сторінку та вікно веб-переглядача


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

screenshot describing which values are wanted


1607
2017-08-09 06:28


походження


Гарна картинка. Всі питання повинні і відповіді повинні бути таким. - Damien Golding
pageHeight (на рис) ви можете отримати з: document.body.scrollHeight - befzz
побачити https://developer.mozilla.org/en-US/docs/Web/API/Window.screen і http://www.quirksmode.org/dom/w3c_cssom.html#screenview - rawiro
Цікаво: ryanve.com/lab/dimensions - Ring Ø
Корисний навчальний посібник - w3schools.com/jsref/prop_win_innerheight.asp - Uncle Iroh


Відповіді:


Якщо ви використовуєте 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;

1142
2017-08-09 06:39



спасибі, і чи є якийсь спосіб отримати сторінкуX, pageY, screenX, screenY? - turtledove
Високий метод методу jQuery (), як видається, працює для всіх елементів і повертає число (46), а не рядок, як css ('height') ("46px") - Chris
Що стосується мобільних Safari, на жаль, jQuery - це не ідеальне рішення цього питання. Дивіться примітку в рядку № 13 на github.com/jquery/jquery/blob/master/src/dimensions.js - Joshua
@ 웃 idalღ คлія те, що ви редагували у відповідь? відповідно до змін, ви нічого не редагували взагалі - DanFromGermany
@Marco Kerwitz Найгірше, що я ввів "JavaScript-отримати ширину вікна", і вміст цієї відповіді був на Google. Великий мінус один від мене. - Maciej Krawczyk


Це все, що потрібно знати:

http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/

а коротше:

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

Скрипка


816
2017-07-31 15:52



Чому ні g = document.body ? - a paid nerd
@apaidnerd: Стандарти, що відхиляють браузери, такі як IE8, не підтримують document.body. IE9, однак, робить це. - Michael Mikowski
@ Михайло Миковський Це неправда! Навіть IE5 підтримує document.body. - Nux
@nux я стою виправлено, і я підтвердив підтримку в IE8. Я знаю, що хоча б один браузер, на який ми орієнтувалися останнім часом не підтримує document.body, і нам довелося змінити, використовуючи метод getElementsByTagName. Але я здогадуюсь, що я неправильно назвав браузер. Вибачте! - Michael Mikowski
Це не коротке, це не пояснення. Ніякого злочину я просто не можу отримати доступ до сайту на даний момент. - Adi Prasetyo


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

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

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

366
2018-01-30 17:44



Це краще, тому що якщо ви можете називати сценарій досить рано в процесі завантаження (часто ідея), то body element поверне значення undefined як будинок ще не завантажений. - dgo
HA! Стара тема, але спасибі за це! Я думаю, я один з тих старих "ідіотів", які намагаються при необхідності підтримувати принаймні назад до IE8, на користь дивовижної кількості старших домашніх користувачів, які ніколи не перестануть використовувати XP, поки їхні машини не загоряться. Я втомився задавати запитання, а не отримувати відповідь, а лише отримав "STOP SUPPORTING IE8 !!" як коментар Знову спасибі! Це дозволило мені вирішити проблему в чистому масштабованому масштабі JavaScript, який я зробив. Його трохи повільно на IE8, але тепер принаймні це працює !!! :-) - Randy


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

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

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

availWidth і availHeight - Доступна ширина і висота на   екран (за винятком панелей завдань OS і т. ін.).


77
2018-06-20 10:06



такий же, як ширина screen.height - на андроїд chrome браузер показує ділиться на піксельне співвідношення :( - Darius.V
window.screen.availHeight Схоже, що він приймає повноекранний режим, так що звичайний режим екрана змушує прокручувати (перевірено в Firefox і Chrome). - Suzana
@ Suzana_K потім використовувати window.screen.height замість цього. - Vallentin


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

window.innerWidth, window.innerHeight

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


48
2018-04-22 07:29



Це повинно бути прийнятною відповіддю з великою кількістю оновлень. Набагато корисніше відповіді, ніж поточна прийнята відповідь, і вона також не залежить від jQuery. - developerbmw
На жаль, window.innerWidth і window.innerHeight не враховуйте розмір смуги прокрутки. Якщо присутні смуги прокрутки, ці методи повертають неправильні результати для розміру вікон майже у всіх робочих браузерах. Побачити stackoverflow.com/a/31655549/508355 - hashchange


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

17
2018-02-11 04:25





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

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

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


15
2017-08-21 10:44



Це не підтримується в ie8 або ie7, відповідно до w3schools. Крім того, ви повинні стежити, коли ви посилаєтеся на w3schools. Побачити meta.stackexchange.com/questions/87678/... - thecarpy