Hoe krijg ik windowWidth, windowHeight, pageWidth, pageHeight, screenWidth, screenHeight, window.screenX or Y, window.screenX or Y, screenX, screenYdie zullen werken in alle belangrijke browsers?

Antwoord 1, autoriteit 100%

Je kunt de grootte van het venster of document krijgen met jQuery:

// Size of browser viewport.
$(window).height();
$(window).width();
// Size of HTML document (same as pageHeight/pageWidth in screenshot).
$(document).height();
$(document).width();

Voor schermgrootte kunt u het screenobject:

window.screen.height;
window.screen.width;

Antwoord 2, autoriteit 69%

Hier staat alles wat u moet weten: Bekijk de grootte van het venster/venster

maar in het kort:

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

Fiddle

Stop met het bewerken van dit antwoord. Het is nu 22 keer bewerkt door verschillende mensen om de voorkeur van hun codelformaat te matchen. Er is ook op gewezen dat dit niet vereist is als u alleen de moderne browsers wilt targeten – als het daarom alleen het volgende nodig heeft:

const width  = window.innerWidth || document.documentElement.clientWidth || 
document.body.clientWidth;
const height = window.innerHeight|| document.documentElement.clientHeight|| 
document.body.clientHeight;
console.log(width, height);

3, Autoriteit 34%

Hier is een cross-browseroplossing met puur javascript (bron ):

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

4, Autoriteit 7%

een niet-jQuery manier om de beschikbare schermdimensie te krijgen. window.screen.width/heightis al opgemaakt, maar voor reagerende webdesign en volledigheidssake denk ik dat het de moeite waard is om die kenmerken te vermelden:

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

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

Beschikbaarstijl en AvondsHeight – de beschikbare breedte en hoogte op de
scherm (met uitzondering van OS-taken en dergelijke).

5, Autoriteit 5%

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

window.innerWidth, window.innerHeight

geeft de juiste meting. Zelfs het verwijdert de extra ruimte van de scroll-bar en we hoeven zich geen zorgen te maken over het aanpassen van die ruimte 🙂

6

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

7

Controleer de hoogte en breedte van uw huidige pagina van elke website met “Console” of na het klikken op “Inspect” .

Stap 1 : klik op de rechterknop van de muis en klik op ‘Inspect’ en klik vervolgens op ‘Console’

Stap 2 : zorg ervoor dat uw browserscherm niet in ‘Maximaliseer’ modus moet staan. Als het browserscherm is in de modus ‘Maximaliseer’, moet u eerst op de knop Maximaliseren (aanwezig zijn (aanwezig in de rechter of linker bovenhoek) en het niet maximaliseren.

Stap 3 : Nu, schrijf het volgende na de grotere dan teken (‘& GT;’) 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)

8

U kunt ook de vensterbreedte en -hoogte krijgen, het vermijden van browserwerkbalken en andere dingen. Het is het echt bruikbaar gebied in het venster van de browser .

Gebruik dit:
window.innerWidthen window.innerHeighteigenschappen (Zie doc op W3schools ).

In de meeste gevallen zal het de beste manier zijn, bijvoorbeeld om een ​​perfect gecentreerd drijvend modaal dialoogvenster weer te geven. Hiermee kunt u posities op het venster berekenen, ongeacht welke resolutie oriëntatie of venstergrootte de browser gebruikt.

9

Als u een echt kogelvrije oplossing nodig heeft voor de documentbreedte en -hoogte (de pageWidthen pageHeightin de afbeelding), kunt u overwegen een plug-in van mij te gebruiken , jQuery.documentSize.

Het heeft maar één doel: altijd de juiste documentgrootte retourneren, zelfs in scenario’s waarin jQuery en andere methoden mislukken. Ondanks de naam hoef je jQuery niet per se te gebruiken – het is geschreven in vanille Javascript en werkt ook zonder jQuery.

Gebruik:

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

voor het algemene document. Voor andere documenten, b.v. in een ingebed 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 raamafmetingen

Sinds versie 1.1.0 verwerkt jQuery.documentSize ook vensterafmetingen.

Dat is nodig omdat

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

jQuery.documentsize biedt $.windowWidth()en $.windowHeight(), die deze problemen oplossen. Voor meer, kijk op de documentatie .

Antwoord 10

Ik heb een kleine javascript-bookmarklet geschreven die je kunt gebruiken om de grootte weer te geven. Je kunt het eenvoudig toevoegen aan je browser en telkens als je erop klikt, zie je de grootte in de rechterhoek van je browservenster.

Hier vindt u informatie over het gebruik van een bookmarklet
https://en.wikipedia.org/wiki/Bookmarklet

Bladwijzer

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="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js",e.onload=n,document.body.appendChild(e))}()}).call(this);

Originele code

De originele code zit 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 feite gaat de code vooraf aan een kleine div die wordt bijgewerkt wanneer je het formaat van je venster wijzigt.

Antwoord 11

Grafisch antwoord:

(…………)

Antwoord 12

Met de introductie van globalThisin ES2020u kunt eigenschappen gebruiken zoals.

Voor schermgrootte:

globalThis.screen.availWidth 
globalThis.screen.availHeight

Voor venstergrootte

globalThis.outerWidth
globalThis.outerHeight

Voor compensatie:

globalThis.pageXOffset
globalThis.pageYOffset

…& enzovoort.

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

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

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

Screen {
    availWidth: 1920,
    availHeight: 1040,
    width: 1920,
    height: 1080,
    colorDepth: 24,
    pixelDepth: 24,
    top: 414,
    left: 1920,
    availTop: 414,
    availLeft: 1920
}

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

var screenWidth = window.screen.availWidth;
<Label style={{ width: screenWidth == "1680" ? 570 : 200, color: "transparent" }}>a  </Label>