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

2018

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

capture d'écran décrivant les valeurs souhaitées

tourterelle
la source
9
pageHeight (sur une photo) que vous pouvez obtenir avec: document.body.scrollHeight
befzz
Cela pourrait-il également être pertinent? developer.mozilla.org/en-US/docs/Web/API/Window.matchMedia
MEM
3
Intéressant: ryanve.com/lab/dimensions
e2-e4
1
Tutoriel utile - w3schools.com/jsref/prop_win_innerheight.asp
Uncle Iroh

Réponses:

1389

Vous pouvez obtenir la taille de la fenêtre ou du document avec jQuery:

// Size of browser viewport.
$(window).height();
$(window).width();

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

Pour la taille de l'écran, vous pouvez utiliser l' screenobjet:

window.screen.height;
window.screen.width;
Ankit Jaiswal
la source
2
La méthode jQuery height () semble fonctionner pour tous les éléments et retourne un nombre ( 46) plutôt qu'une chaîne comme css ('height') ( "46px").
Chris
6
Lorsqu'il s'agit de Safari mobile, jQuery n'est malheureusement pas une solution parfaite à cette question. Voir la note sur la ligne # 13 sur github.com/jquery/jquery/blob/master/src/dimensions.js
Joshua
8
@ 웃 웃웃 웃웃 qu'avez-vous modifié dans la réponse? selon les révisions, vous n'avez rien édité du tout
Daniel W.
14
@Marco Kerwitz Le pire, c'est que j'ai tapé "javascript get window width" et le contenu de cette réponse était sur Google. Un gros moins de moi.
Maciej Krawczyk
2
L'OP DID DEMANDE que jquery est une option. Quiconque ninja a édité la question d'origine pour l'exclure est en faute ici, pas les personnes donnant des réponses légitimes en utilisant une bibliothèque javascript acceptée mondialement.
IncredibleHat
963

Cela a tout ce que vous devez savoir: obtenir la taille de la fenêtre / fenêtre

mais en bref:

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

Violon

Veuillez arrêter de modifier cette réponse. Il a été modifié 22 fois maintenant par différentes personnes pour correspondre à leur préférence de format de code. Il a également été souligné que cela n'est pas nécessaire si vous souhaitez uniquement cibler les navigateurs modernes - si tel est le cas, vous n'avez besoin que des éléments suivants:

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

console.log(width, height);
sidonaldson
la source
58
Pourquoi ne pas g = document.body?
un nerd payé le
51
@apaidnerd: Les navigateurs défiant les normes comme IE8 ne prennent pas en charge document.body. Cependant, IE9 le fait.
Michael Mikowski
46
@MichaelMikowski Ce n'est pas vrai! Même IE5 prend en charge document.body.
Nux
32
@nux Je me corrige et j'ai confirmé le support dans IE8. Je sais cependant qu'au moins un navigateur que nous visions récemment ne supportait pas document.body et nous avons dû changer pour utiliser l'approche getElementsByTagName. Mais je suppose que j'ai mal mémorisé le navigateur. Désolé!
Michael Mikowski
32
Je voudrais juste remarquer très étrangement que les noms de variables à une lettre ne sont jamais utiles.
wybe
480

Voici une solution multi-navigateur avec du JavaScript pur ( Source ):

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

var height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
se confier
la source
9
C'est mieux parce que si vous êtes en mesure d'appeler le script assez tôt dans le processus de chargement (souvent l'idée), alors le body elementrenverra une valeur undefinedcar le dom n'est pas encore chargé.
dgo
16
HA! Vieux fil mais merci pour ça! Je suppose que je fais partie de ces vieux "idiots" qui essaient de soutenir au moins retour à IE8 lorsque cela est possible, au profit du nombre surprenant d'utilisateurs plus âgés qui ne cesseront jamais d'utiliser XP jusqu'à ce que leurs machines prennent feu. Je suis fatigué de poser des questions et au lieu d'obtenir une réponse, de me faire voter avec seulement "ARRÊTEZ DE SUPPORTER IE8 !!" comme commentaire. Merci encore! Cela a résolu un problème pour moi dans un zoom photo javascript pur que j'avais fait. C'est un peu lent sur IE8, mais maintenant au moins ça marche !!! :-)
Randy
1
super c'est beaucoup mieux que le repos.
vinayak shahdeo
95

Un moyen non jQuery pour obtenir la dimension d'écran disponible. window.screen.width/heighta déjà été mis en place, mais pour le webdesign réactif et l'intégralité, je pense que cela 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 l'écran (à l'exclusion des barres de tâches du système d'exploitation et autres).

Daniel W.
la source
même que la largeur screen.height - sur le navigateur Chrome Android montre divisé par le rapport de pixels :(
Darius.V
2
window.screen.availHeightsemble assumer le mode plein écran de sorte que le mode d'écran normal force le défilement (testé dans Firefox et Chrome).
Suzana
@Suzana_K puis utilisez à la window.screen.heightplace.
vallentin
@vallentin window.screen.height ne fonctionnera pas, mais window.innerHeight fonctionnera
Sam il y a
67

Mais lorsque nous parlons d'écrans réactifs et si nous voulons le gérer à l'aide de 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 à nous soucier d'ajuster cet espace :)

Aabha Pandey
la source
2
Cela devrait être la réponse acceptée avec beaucoup de votes positifs. Une réponse beaucoup plus utile que la réponse actuellement acceptée, et elle ne dépend pas non plus de jQuery.
developerbmw
5
Malheureusement, window.innerWidthet window.innerHeightne prennent pas en compte la taille de la barre de défilement. Si des barres de défilement sont présentes, ces méthodes renvoient des résultats incorrects pour la taille de la fenêtre dans presque tous les navigateurs de bureau. Voir stackoverflow.com/a/31655549/508355
hashchange
20

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 la véritable zone utilisable dans la fenêtre du navigateur .

Pour ce faire, utilisez: window.innerWidth et les window.innerHeightpropriétés ( voir doc sur w3schools ).

Dans la plupart des cas, ce sera la meilleure façon, par exemple, d'afficher une boîte de dialogue modale flottante parfaitement centrée. 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 à l'aide du navigateur.

serfer2
la source
2
Ceci n'est pas pris en charge dans ie8 ni ie7, selon w3schools. En outre, vous devez faire attention lorsque vous vous connectez à w3schools. Voir meta.stackexchange.com/questions/87678/…
thecarpy
20
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>');
mec
la source
20

Pour vérifier la hauteur et la largeur de la page actuellement chargée de n'importe quel site Web à l'aide de "console" ou après avoir cliqué sur "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 «Agrandir», vous devez d'abord cliquer sur le bouton Agrandir (présent 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 à ('>') ie

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

       > window.innerHeight
            output : your present window height in px (say 359)
solanki ...
la source
1
Pourquoi n'est-ce pas la réponse choisie?
Iulian Onofrei,
1
@IulianOnofrei car il ne répond pas entièrement à l'ensemble de questions d'origine. Blague étant, c'est la bonne réponse pour moi.
voler le
innerWidth et innerHeight ne sont précis que si l'échelle de la fenêtre d'affichage est 1. Il s'agit de la valeur par défaut, mais elle peut être modifiée par inadvertance à l'aide de transformations CSS.
Victor Stoddard
"window.innerWidth" par opposition à "screen.width" a fonctionné pour moi pour déterminer la taille du navigateur de l'utilisateur - merci!
Kevin Pajak
10

Si vous avez besoin d'une solution vraiment pare-balles pour la largeur et la hauteur du document (le pageWidthet pageHeightdans l'image), vous voudrez peut-être envisager d'utiliser un de mes plugins , jQuery.documentSize .

Il n'a qu'un seul objectif: toujours renvoyer la taille de document correcte, même dans les scénarios où jQuery et d'autres méthodes échouent . Malgré son nom, vous n'avez pas nécessairement à utiliser jQuery - il est écrit en Javascript vanilla et fonctionne également sans jQuery .

Usage:

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

pour le monde document. Pour les autres documents, par exemple dans un iframe intégré auquel vous avez accès, passez le document en paramètre:

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

Mise à jour: maintenant aussi pour les dimensions des fenêtres

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

Cela est nécessaire car

  • $( window ).height()est buggé dans iOS , au point d'être inutile
  • $( window ).width()et ne $( window ).height()sont pas fiables sur mobile, car ils ne gèrent pas les effets du zoom mobile.

jQuery.documentSize fournit $.windowWidth()et $.windowHeight(), qui résolvent ces problèmes. Pour en savoir plus, consultez la documentation .

hashchange
la source
VM2859: 1 DOMException non capturée: a empêché une trame d'origine " localhost: 12999 " d'accéder à une trame d'origine croisée. (…) Y a-t-il un moyen de surmonter cette situation ???
fizmhd
1
Vous ne pouvez pas accéder aux iframes d'un autre domaine, cela viole la politique de même origine . Découvrez cette réponse .
hashchange
Cela ne fonctionne pas si vous intégrez un iframe et essayez d'obtenir la hauteur du port de vue. window.innerHeight égal à la hauteur du document qui est bogué. Vous ne pouvez pas accéder aux cadres. d'un autre domaine, ce n'est pas une solution réalisable.
M.Abulsoud
@ M.Abulsoud Si vous avez accès à l'iframe (pas de violation CORS), cela fonctionne et est couvert par la suite de tests. Utilisez cette syntaxe . Il fonctionne même avec plusieurs iframes imbriqués les uns dans les autres - voir cet exemple sur Codepen . Si votre configuration fonctionne généralement, mais échoue dans un seul navigateur spécifique, il s'agit peut-être d'un bogue que je ne connais pas. Peut-être pouvez-vous ouvrir un problème dans ce cas? Merci.
hashchange
8

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 d'origine

Le code d'origine est en 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 ajoute un petit div qui se met à jour lorsque vous redimensionnez votre fenêtre.

Andi Giga
la source
5

Dans certains cas, une mise en page réactive $(document).height()peut renvoyer des données erronées qui affichent uniquement la hauteur du port d'affichage. Par exemple, lorsqu'un wrapper div # a une hauteur: 100%, ce # wrapper peut être étiré par un bloc à l'intérieur. Mais sa hauteur sera toujours la hauteur de la fenêtre. Dans une telle situation, vous pourriez utiliser

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

Cela représente la taille réelle du wrapper.

Akim Kelar
la source
Beaucoup ont répondu avec des centaines de votes positifs, mais seul celui-ci a été utile.
Nakilon
5

Guide complet relatif aux tailles d'écran

Javascript

Pour la hauteur:

document.body.clientHeight  // Inner height of the HTML document body, including padding 
                            // but not the horizontal scrollbar height, border, or margin

screen.height               // Device screen height (i.e. all physically visible stuff)
screen.availHeight          // Device screen height minus the operating system taskbar (if present)
window.innerHeight          // The current document's viewport height, minus taskbars, etc.
window.outerHeight          // Height the current window visibly takes up on screen 
                            // (including taskbars, menus, etc.)

Remarque: Lorsque la fenêtre est agrandie, cela équivaut à screen.availHeight

Pour largeur:

document.body.clientWidth   // Full width of the HTML page as coded, minus the vertical scroll bar
screen.width                // Device screen width (i.e. all physically visible stuff)
screen.availWidth           // Device screen width, minus the operating system taskbar (if present)
window.innerWidth           // The browser viewport width (including vertical scroll bar, includes padding but not border or margin)
window.outerWidth           // The outer window width (including vertical scroll bar,
                            // toolbars, etc., includes padding and border but not margin)

Jquery

Pour la hauteur:

$(document).height()    // Full height of the HTML page, including content you have to 
                        // scroll to see

$(window).height()      // The current document's viewport height, minus taskbars, etc.
$(window).innerHeight() // The current document's viewport height, minus taskbars, etc.
$(window).outerHeight() // The current document's viewport height, minus taskbars, etc.                         

Pour largeur:

$(document).width()     // The browser viewport width, minus the vertical scroll bar
$(window).width()       // The browser viewport width (minus the vertical scroll bar)
$(window).innerWidth()  // The browser viewport width (minus the vertical scroll bar)
$(window).outerWidth()  // The browser viewport width (minus the vertical scroll bar)

Référence: https://help.optimizely.com/Build_Campaigns_and_Experiments/Use_screen_measurements_to_design_for_responsive_breakpoints

Hamza Abbasi
la source
4

J'ai développé une bibliothèque pour connaître la taille réelle de la fenêtre d'affichage pour les navigateurs de bureau et mobiles, car les tailles de fenêtre d'affichage sont incohérentes sur tous les appareils et ne peuvent pas s'appuyer sur toutes les réponses de ce message (selon toutes les recherches que j'ai faites à ce sujet): https: // github .com / pyrsmk / W

pyrsmk
la source
3

Parfois, vous devez voir les changements de largeur / hauteur lors du redimensionnement de la fenêtre et du contenu interne.

Pour cela, j'ai écrit un petit script qui ajoute une boîte à journaux qui surveille dynamiquement toutes les mises à jour et presque immédiatement les mises à jour.

Il ajoute un code HTML valide avec une position fixe et un index z élevé, mais est suffisamment petit, vous pouvez donc :

  • l'utiliser sur un site réel
  • l'utiliser pour tester des vues mobiles / réactives


Testé sur: Chrome 40, IE11, mais il est également possible de travailler sur d'autres navigateurs / anciens ... :)

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

EDIT: Maintenant, les styles sont appliqués uniquement à l'élément de table de l'enregistreur - pas à toutes les tables - c'est aussi une solution sans jQuery :)

jave.web
la source
3

Avec l'introduction de globalThisdans ES2020, vous pouvez utiliser des propriétés telles que.

Pour la taille de l'écran:

globalThis.screen.availWidth 
globalThis.screen.availHeight

Pour la taille de la fenêtre

globalThis.outerWidth
globalThis.outerHeight

Pour le décalage:

globalThis.pageXOffset
globalThis.pageYOffset

...& bientôt.

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

Prashant Gupta
la source
2

Vous pouvez utiliser l' écran objet pour l'obtenir.

Ce qui suit est un exemple de ce qu'il retournerait:

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

Pour obtenir votre screenWidthvariable, utilisez simplement la screen.widthmême chose que screenHeightvous utiliseriez screen.height.

Pour obtenir la largeur et la hauteur de votre fenêtre, ce serait screen.availWidthou screen.availHeightrespectivement.

Pour les variables pageXet pageY, utilisez window.screenX or Y. Notez que cela provient du TRÈS GAUCHE / HAUT DE VOTRE ÉCRAN GAUCHE / HAUT . Donc, si vous avez deux écrans de largeur, 1920une fenêtre à 500 pixels à gauche de l'écran de droite aurait une valeur X de 2420(1920 + 500).screen.width/height, cependant, affichez la largeur ou la hauteur de l'écran ACTUEL.

Pour obtenir la largeur et la hauteur de votre page, utilisez jQuery $(window).height()ou$(window).width() .

En utilisant à nouveau jQuery, utilisez $("html").offset().topet $("html").offset().leftpour vos valeurs pageXet pageY.

Zach Barham
la source
screenX / Y est relatif à l'écran principal et non à l'écran le plus à gauche / en haut. C'est pourquoi la valeur est négative si vous êtes actuellement sur un écran à gauche de l'écran principal.
Tom
0

voici ma solution!

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


la source
1
! screen-ok
0

Voici comment j'ai réussi à obtenir la largeur de l'écran dans React JS Project:

Si la largeur est égale à 1680, retournez 570 sinon retournez 200

var screenWidth = window.screen.availWidth;

<Label style={{ width: screenWidth == "1680" ? 570 : 200, color: "transparent" }}>a  </Label>

Screen.availWidth

Prashant Yalatwar
la source