Vraag Verkrijg de grootte van het scherm, de huidige webpagina en het browservenster


Hoe kan ik ... krijgen windowWidth, windowHeight, pageWidth, pageHeight, screenWidth, screenHeight, pageX, pageY, screenX, screenY welke werkt in alle belangrijke browsers?

screenshot describing which values are wanted


1596
2017-08-09 06:28


oorsprong


antwoorden:


Als u jQuery gebruikt, kunt u de grootte van het venster of het document verkrijgen met behulp van jQuery-methoden:

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

Voor schermgrootte kunt u de screen object op de volgende manier:

screen.height;
screen.width;

1137
2017-08-09 06:39



Dit is alles wat je moet weten:

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

maar in het kort:

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

Viool


815
2017-07-31 15:52



Hier is een crossbrowser-oplossing met puur JavaScript (Bron):

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

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

362
2018-01-30 17:44



Een niet-jQuery-manier om de beschikbare schermdimensie te krijgen. window.screen.width/height is al opgemaakt, maar voor responsive webdesign en volledigheid, denk ik dat het de moeite waard is om die attributen te vermelden:

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

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

availWidth en availHeight - De beschikbare breedte en hoogte op de   scherm (met uitzondering van OS taakbalken en dergelijke).


77
2018-06-20 10:06



Maar als we het hebben over responsieve schermen en als we het om de een of andere reden willen gebruiken met jQuery,

window.innerWidth, window.innerHeight

geeft de juiste meting. Zelfs het verwijdert de extra ruimte van de schuifbalk en we hoeven ons geen zorgen te maken over het aanpassen van die ruimte :)


47
2018-04-22 07:29



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



U kunt ook de WINDOW-breedte en -hoogte verkrijgen, waardoor u browser-werkbalken en andere dingen vermijdt. Het is de echt bruikbaar gebied in het browservenster.

Gebruik hiervoor: window.innerWidth  en window.innerHeight eigenschappen (zie doc op w3schools).

In de meeste gevallen is dit bijvoorbeeld de beste manier om een ​​perfect gecentreerde zwevende modale dialoog weer te geven. Hiermee kunt u posities in het venster berekenen, ongeacht de resolutie of de grootte van het venster via de browser.


15
2017-08-21 10:44



Om de hoogte en breedte van uw huidige geladen pagina van een website te controleren via "troosten" of na klikken "Inspecteren".

stap 1: Klik met de rechtermuisknop en klik op 'Inspecteren' en klik vervolgens op 'console'

stap 2: Zorg ervoor dat uw browserscherm zich niet in de modus 'maximaliseren' bevindt. Als het browserscherm in de modus 'maximaliseren' staat, moet u eerst op de knop maximaliseren klikken (aanwezig in de rechter- of linkerbovenhoek) en de maximalisatie ongedaan maken.

stap 3: Nu, schrijf het volgende na het groter dan teken ('>') d.w.z.

       > 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



Als u een echt kogelvrije oplossing nodig heeft voor de breedte en hoogte van het document (de pageWidth en pageHeight op de foto), kunt u overwegen een plug-in van mij te gebruiken, jQuery.documentSize.

Het heeft slechts één doel: altijd de juiste documentgrootte retourneren, zelfs in scenario's als jQuery en andere methoden mislukken. Ondanks de naam hoeft u niet per se jQuery te gebruiken - het is geschreven in vanilla Javascript en werkt zonder jQueryook.

Gebruik:

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

voor de global document. Voor andere documenten, b.v. in een ingesloten iframe waartoe u toegang hebt, geeft u het document door als parameter:

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

Update: nu ook voor vensterafmetingen

Sinds versie 1.1.0 verwerkt jQuery.documentSize ook vensterdimensies.

Dat is nodig omdat

  • $( window ).height() is buggy in iOS, tot op het punt van nutteloos te zijn
  • $( window ).width() en $( window ).height() zijn onbetrouwbaar op mobiel omdat ze niet omgaan met de effecten van mobiel zoomen.

jQuery.documentSize biedt $.windowWidth() en $.windowHeight(), die deze problemen oplossen. Bekijk voor meer informatie de documentatie.


8
2018-03-04 22:30



Ik heb een kleine javascript bookmarklet geschreven die je kunt gebruiken om de grootte weer te geven. U kunt het eenvoudig toevoegen aan uw browser en wanneer u erop klikt, ziet u de grootte in de rechterhoek van uw browservenster.

Hier vindt u informatie over het gebruik van een bookmarklet 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);

Oorspronkelijke code

De originele code is in koffie:

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

In principe is de code een kleine div aan het voorbereiden die wordt bijgewerkt wanneer je de grootte van je venster aanpast.


8
2018-03-31 09:25



Ik heb een bibliotheek ontwikkeld om de echte viewport-grootte te kennen voor desktops en mobiele browsers, omdat viewport-afmetingen inconsistent zijn op verschillende apparaten en niet kunnen vertrouwen op alle antwoorden van die post (volgens al het onderzoek dat ik hierover heb gedaan): https://github.com/pyrsmk/W


4
2018-04-13 08:16