Question Obtenez la taille de l'écran, la page Web actuelle et la fenêtre du navigateur


Comment puis-je avoir windowWidth, windowHeight, pageWidth, pageHeight, screenWidth, screenHeight, pageX, pageY, screenX, screenY qui fonctionnera dans tous les principaux navigateurs?

screenshot describing which values are wanted


1596
2017-08-09 06:28


origine


Réponses:


Si vous utilisez jQuery, vous pouvez obtenir la taille de la fenêtre ou du document en utilisant les méthodes 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)

Pour la taille de l'écran, vous pouvez utiliser le screen objet de la manière suivante:

screen.height;
screen.width;

1137
2017-08-09 06:39



C'est tout ce que vous devez savoir:

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

mais en un mot:

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

Violon


815
2017-07-31 15:52



Voici une solution de navigateur croisé avec pur JavaScript (La source):

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



Un moyen non jQuery pour obtenir la dimension d'écran disponible. window.screen.width/height a déjà été mis en place, mais pour le webdesign responsive et la complétude, je pense qu'il vaut la peine de mentionner ces attributs:

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

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

availWidth et availHeight - La largeur et la hauteur disponibles sur le   écran (à l'exclusion des barres de tâches OS et autres).


77
2018-06-20 10:06



Mais quand nous parlons d'écrans réactifs et si nous voulons le gérer en utilisant jQuery pour une raison quelconque,

window.innerWidth, window.innerHeight

donne la mesure correcte. Même cela supprime l'espace supplémentaire de la barre de défilement et nous n'avons pas besoin de nous soucier d'ajuster cet espace :)


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



Vous pouvez également obtenir la largeur et la hauteur de WINDOW, en évitant les barres d'outils du navigateur et d'autres choses. C'est le zone réelle utilisable dans la fenêtre du navigateur.

Pour ce faire, utilisez: window.innerWidth  et window.innerHeight Propriétés (voir doc à w3schools).

Dans la plupart des cas, ce sera le meilleur moyen, par exemple, d'afficher un dialogue modal flottant parfaitement centré. Il vous permet de calculer les positions sur la fenêtre, quelle que soit l'orientation de la résolution ou la taille de la fenêtre en utilisant le navigateur.


15
2017-08-21 10:44



Pour vérifier la hauteur et la largeur de la page actuellement chargée de tout site Web utilisant "console" ou après avoir cliqué "Inspecter".

étape 1: Cliquez sur le bouton droit de la souris et cliquez sur "Inspecter" puis sur "console"

étape 2: Assurez-vous que l'écran de votre navigateur ne doit pas être en mode "maximiser". Si l'écran du navigateur est en mode 'maximiser', vous devez d'abord cliquer sur le bouton Agrandir (présent soit dans le coin supérieur droit ou gauche) et le dé-maximiser.

étape 3: Maintenant, écrivez ce qui suit après le signe supérieur ('>'), c'est-à-dire

       > 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



Si vous avez besoin d'une solution vraiment pare-balles pour la largeur et la hauteur du document pageWidth et pageHeight dans l'image), vous pourriez envisager d'utiliser un plugin à moi, jQuery.documentSize.

Il n'a qu'un seul but: toujours retourner la bonne taille de document, même dans les scénarios où jQuery et d'autres méthodes échouer. Malgré son nom, vous ne devez pas nécessairement utiliser jQuery - il est écrit en Javascript vanilla et fonctionne sans jQuery, aussi.

Usage:

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

pour le mondial document. Pour d'autres documents, par ex. dans un iframe incorporé auquel vous avez accès, passez le document en paramètre:

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

Mise à jour: maintenant pour les dimensions de la fenêtre, aussi

Depuis la version 1.1.0, jQuery.documentSize gère également les dimensions de la fenêtre.

C'est nécessaire parce que

  • $( window ).height() est buggy dans iOS, au point d'être inutile
  • $( window ).width() et $( window ).height() sont peu fiable sur mobile parce qu'ils ne gèrent pas les effets du zoom mobile.

jQuery.documentSize fournit $.windowWidth() et $.windowHeight(), qui résolvent ces problèmes. Pour plus, s'il vous plaît vérifier La documentation.


8
2018-03-04 22:30



J'ai écrit un petit bookmarklet javascript que vous pouvez utiliser pour afficher la taille. Vous pouvez facilement l'ajouter à votre navigateur et chaque fois que vous cliquez dessus, vous verrez la taille dans le coin droit de la fenêtre de votre navigateur.

Vous trouverez ici des informations sur l'utilisation d'un 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);

Code original

Le code d'origine est dans le café:

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

Fondamentalement, le code est précédé d'une petite div qui se met à jour lorsque vous redimensionnez votre fenêtre.


8
2018-03-31 09:25