Pytanie Uzyskaj rozmiar ekranu, aktualną stronę internetową i okno przeglądarki


Jak mogę zdobyć windowWidth, windowHeight, pageWidth, pageHeight, screenWidth, screenHeight, pageX, pageY, screenX, screenY który będzie działał we wszystkich głównych przeglądarkach?

screenshot describing which values are wanted


1608
2017-08-09 06:28


pochodzenie


Ładne zdjęcie. Wszystkie pytania i odpowiedzi powinny być takie. - Damien Golding
pageHeight (na zdjęciu) można uzyskać za pomocą: document.body.scrollHeight - befzz
widzieć https://developer.mozilla.org/en-US/docs/Web/API/Window.screen i http://www.quirksmode.org/dom/w3c_cssom.html#screenview - rawiro
Ciekawy: ryanve.com/lab/dimensions - Ring Ø
Pomocny samouczek - w3schools.com/jsref/prop_win_innerheight.asp - Uncle Iroh


Odpowiedzi:


Jeśli używasz jQuery, możesz uzyskać rozmiar okna lub dokumentu za pomocą metod 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)

Dla rozmiaru ekranu możesz użyć screen obiekt w następujący sposób:

screen.height;
screen.width;

1142
2017-08-09 06:39



dziękuję i czy istnieje sposób na uzyskanie strony X, pageY, screenX, screenY? - turtledove
Wydajność metody jQuery () wydaje się działać dla wszystkich elementów i zwraca liczbę (46) zamiast ciągu takiego jak css ("wysokość") ("46px"). - Chris
W przypadku mobilnego Safari, niestety, jQuery nie jest idealnym rozwiązaniem tego problemu. Zobacz notatkę w wierszu 13 na stronie github.com/jquery/jquery/blob/master/src/dimensions.js - Joshua
@ 웃 웃웃 웃웃 co edytowałeś w odpowiedzi? zgodnie z wersjami niczego nie edytowałeś - DanFromGermany
@ Marco Kerwitz Najgorsze jest to, że wpisałem "javascript get window width", a treść tej odpowiedzi była w Google. Duży minus jeden ode mnie. - Maciej Krawczyk


To wszystko, co musisz wiedzieć:

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

ale w skrócie:

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

Skrzypce


816
2017-07-31 15:52



Dlaczego nie g = document.body ? - a paid nerd
@apaidnerd: Standardy, w przeciwieństwie do przeglądarek takich jak IE8, nie obsługują document.body. IE9 jednak tak robi. - Michael Mikowski
@MichaelMikowski To nie jest prawda! Nawet IE5 obsługuje document.body. - Nux
@nux Poprawiam się i potwierdzam wsparcie w IE8. Wiem jednak, że przynajmniej jeden program, na który ostatnio celowaliśmy, nie obsługiwał document.body i musieliśmy zmienić sposób korzystania z metody getElementsByTagName. Ale domyślam się, że źle zapamiętałem przeglądarkę. Przepraszam! - Michael Mikowski
Nie jest krótki, nie ma żadnego wyjaśnienia. Bez urazy po prostu nie mogę uzyskać dostępu do strony w tej chwili. - Adi Prasetyo


Oto rozwiązanie z przeglądarki krzyżowej z czystym JavaScript (Źródło):

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

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

367
2018-01-30 17:44



Jest to lepsze, ponieważ jeśli jesteś w stanie wywołać skrypt wystarczająco wcześnie w procesie ładowania (często pomysł), to body elementzwróci wartość undefined ponieważ dom nie jest jeszcze załadowany. - dgo
HA! Stara nić, ale dzięki za to! Sądzę, że jestem jednym z tych starych "idiotów", którzy starają się wspierać przynajmniej powrót do IE8, gdy tylko jest to możliwe, z korzyścią dla zaskakującej liczby starszych użytkowników domowych, którzy nigdy nie przestaną używać XP, dopóki ich maszyny się nie zapalą. Zmęczony zadawaniem pytań, zamiast otrzymywania odpowiedzi, przegłosowano z "ZATRZYMUJEMY WSPIERANIE IE8 !!" jako komentarz. Jeszcze raz dzięki! Rozwiązało to dla mnie problem z czystym zoomem javascriptowym, który zrobiłem. Jest trochę powolny na IE8, ale teraz przynajmniej działa !!! :-) - Randy


Non-jQuery sposób na uzyskanie dostępnego wymiaru ekranu. window.screen.width/height został już opracowany, ale w przypadku responsywnego projektu strony internetowej i kompletności myślę, że warto wspomnieć o tych atrybutach:

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

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

availWidth i availHeight - Dostępna szerokość i wysokość na   ekran (z wyłączeniem paneli operacyjnych OS i tym podobnych).


77
2018-06-20 10:06



tak samo jak szerokość screen.height - w przeglądarce Chrome Chrome pokazuje stosunek podzielony przez piksel :( - Darius.V
window.screen.availHeight wydaje się przyjmować tryb pełnoekranowy, aby normalny tryb ekranu wymuszał przewijanie (testowane w Firefoksie i Chrome). - Suzana
@ Suzanna_K następnie użyć window.screen.height zamiast. - Vallentin


Ale kiedy mówimy o elastycznych ekranach i jeśli chcemy z jakiegoś powodu to zrobić, używając jQuery,

window.innerWidth, window.innerHeight

daje prawidłowy pomiar. Nawet usuwa dodatkową przestrzeń paska przewijania i nie musimy się martwić o dostosowanie tej przestrzeni :)


48
2018-04-22 07:29



To powinna być zaakceptowana odpowiedź z mnóstwem upvotes. O wiele bardziej przydatna odpowiedź niż obecnie zaakceptowana odpowiedź, a także nie zależy od jQuery. - developerbmw
Niestety, window.innerWidth i window.innerHeight nie uwzględniają rozmiaru paska przewijania. Jeśli są dostępne paski przewijania, metody te zwracają błędne wyniki dla rozmiaru okna w prawie wszystkich przeglądarkach komputerowych. Widzieć 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





Możesz także uzyskać szerokość i wysokość WINDOW, omijając paski narzędzi przeglądarki i inne rzeczy. To jest prawdziwy obszar użytkowy w oknie przeglądarki.

Aby to zrobić, użyj: window.innerWidth  i window.innerHeight nieruchomości (zobacz doc w w3schools).

W większości przypadków najlepiej będzie, na przykład, wyświetlić doskonale wyśrodkowany pływający dialog modalny. Umożliwia obliczanie pozycji w oknie, bez względu na to, która orientacja rozdzielczości lub rozmiar okna jest używany w przeglądarce.


15
2017-08-21 10:44



Nie jest to obsługiwane w ie8 ani ie7, zgodnie z w3schools. Musisz także uważać, kiedy łączysz się z w3schools. Widzieć meta.stackexchange.com/questions/87678/... - thecarpy


Aby sprawdzić wysokość i szerokość aktualnej załadowanej strony dowolnej witryny przy użyciu "konsola" lub po kliknięciu "Sprawdzać".

krok 1: Kliknij prawym przyciskiem myszy i kliknij "Sprawdź", a następnie kliknij "konsola"

krok 2: Upewnij się, że ekran przeglądarki nie powinien być w trybie "maksymalizacji". Jeśli ekran przeglądarki znajduje się w trybie "maksymalizacji", musisz najpierw kliknąć przycisk maksymalizacji (obecny w prawym lub lewym górnym rogu) i uniezupełnić go.

krok 3: Teraz napisz po znaku większym niż znak (">"), tj.

       > window.innerWidth
            output : your present window width in px (say 749)

       > window.innerHeight
            output : your present window height in px (say 359)

12
2017-07-09 04:22



Dlaczego nie jest to wybrana odpowiedź? - Iulian Onofrei
@IulianOnofrei, ponieważ nie w pełni odpowiada na oryginalny zestaw pytań. Żart jest, to jest poprawna odpowiedź dla mnie. - rob
innerWidth i innerHeight są dokładne tylko wtedy, gdy skala widoku wynosi 1. Jest to wartość domyślna, ale można ją nieumyślnie zmienić za pomocą transformacji css. - Victor Stoddard
"window.innerWidth" w przeciwieństwie do "screen.width" działało dla mnie w celu określenia rozmiaru przeglądarki użytkownika - dziękuję! - Kevin Pajak


Jeśli potrzebujesz prawdziwie kuloodpornego rozwiązania dla szerokości i wysokości dokumentu ( pageWidth i pageHeight na zdjęciu), możesz rozważyć użycie mojej wtyczki, jQuery.documentSize.

Ma tylko jeden cel: zawsze zwracać prawidłowy rozmiar dokumentu, nawet w scenariuszach, gdy jQuery i inne metody zawieść. Pomimo swojej nazwy, niekoniecznie musisz używać jQuery - jest napisane w wanilii Javascript i działa bez jQuery, także.

Stosowanie:

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

dla globalnych document. W przypadku innych dokumentów, np. w osadzonym elemencie iframe, do którego masz dostęp, przekazuj dokument jako parametr:

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

Aktualizacja: teraz także dla wymiarów okna

Od wersji 1.1.0 jQuery.documentSize obsługuje również wymiary okna.

Jest to konieczne, ponieważ

jQuery.documentSize zapewnia $.windowWidth() i $.windowHeight(), które rozwiązują te problemy. Aby uzyskać więcej informacji, sprawdź dokumentacja.


8
2018-03-04 22:30



VM2859: 1 Uncaught DOMException: Zablokowano ramkę z początkiem "localhost: 12999 "; z dostępu do ramki o krzyżowym pochodzeniu. (...) Czy jest jakikolwiek sposób, aby to nadrobić? - fizmhd
Nie możesz uzyskać dostępu do elementów iframe z innej domeny, ponieważ narusza to polityka tego samego pochodzenia. Sprawdzić ta odpowiedź. - hashchange


Napisałem małą bookmarklet javascript, którego można użyć do wyświetlenia rozmiaru. Możesz łatwo dodać go do przeglądarki i kiedy klikniesz, zobaczysz rozmiar w prawym rogu okna przeglądarki.

Tutaj znajdziesz informacje na temat używania skryptozakładki 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);

Oryginalny kod

Oryginalny kod znajduje się w kawie:

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

Zasadniczo kod jest poprzedzający mały div, który aktualizuje się podczas zmiany rozmiaru okna.


8
2018-03-31 09:25





Stworzyłem bibliotekę, która zna rzeczywisty rozmiar rzutni dla komputerów stacjonarnych i przeglądarek mobilnych, ponieważ rozmiary rzutni są niespójne dla różnych urządzeń i nie mogą opierać się na wszystkich odpowiedziach tego wpisu (zgodnie ze wszystkimi badaniami, które przeprowadziłem na ten temat): https://github.com/pyrsmk/W


4
2018-04-13 08:16