web-dev-qa-db-fra.com

Calcul JavaScript avec largeur/hauteur de la fenêtre

J'essaie de définir un point réactif dans mon WebView mobile et a fait ceci:

var w = window.innerWidth-40;
var h = window.innerHeight-100;

Cela fonctionne très bien jusqu'à présent. Mais les valeurs -40 et -100 ne figurent pas dans la hauteur et la largeur de la fenêtre d'affichage.

Quand je fais ça: 

var w = window.innerWidth-40vw;
var h = window.innerHeight-100vh;

comme il se doit pour rester réactif et relatif à la fenêtre d'affichage - le JS ne fonctionne plus ... Je pense que vh et vw ne fonctionnent qu'en CSS?

Ne propose aucune solution JQuery - seulement JS!

Merci

javascriptcssviewport
7
Tobias Alt

Basé sur ce site vous pouvez écrire la fonction suivante dans javascript pour calculer les valeurs souhaitées:

function vh(v) {
  var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
  return (v * h) / 100;
}

function vw(v) {
  var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
  return (v * w) / 100;
}

function vmin(v) {
  return Math.min(vh(v), vw(v));
}

function vmax(v) {
  return Math.max(vh(v), vw(v));
}
console.info(vh(20), Math.max(document.documentElement.clientHeight, window.innerHeight || 0));
console.info(vw(30), Math.max(document.documentElement.clientWidth, window.innerWidth || 0));
console.info(vmin(20));
console.info(vmax(20));

J'ai utilisé ceci question incroyable dans mes codes! 

12
Yashar Aliabasi

Essaye ça: 

function getViewport() {

 var viewPortWidth;
 var viewPortHeight;

 // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
 if (typeof window.innerWidth != 'undefined') {
   viewPortWidth = window.innerWidth,
   viewPortHeight = window.innerHeight
 }

// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
 else if (typeof document.documentElement != 'undefined'
 && typeof document.documentElement.clientWidth !=
 'undefined' && document.documentElement.clientWidth != 0) {
    viewPortWidth = document.documentElement.clientWidth,
    viewPortHeight = document.documentElement.clientHeight
 }

 // older versions of IE
 else {
   viewPortWidth = document.getElementsByTagName('body')[0].clientWidth,
   viewPortHeight = document.getElementsByTagName('body')[0].clientHeight
 }
 return [viewPortWidth, viewPortHeight];
}

Référence: http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/

2
Arun V K

Le problème est que JS n’a pas 40vh, calcule combien de pixels est 40vh d’abord pour l’utiliser. Cela provoquera une erreur en faisant 1000 - 40vh

40vh signifie 40 % of viewport height. Alors window.innerHeight * 0.4 == 40vh

De plus, wh n'existe pas, seulement vh (% de la hauteur de la fenêtre d'affichage)

2
Justinas

Le moyen le plus simple de le faire, si vous pouvez complètement éditer la page, est de créer une classe CSS avec -40vw et -100vh comme ceci:

CSS:

.class{
    width: -40vw;
    height: -100vh;
}

JS:

element.classList.add("class");

Remarque: "classList" n'est pas pris en charge dans Internet Explorer 9. Si vous souhaitez que cela fonctionne dans tous les navigateurs, utilisez ceci pour JS à la place:

function myFunction() {
    var element, name, arr;
    element = document.getElementById("myDIV");
    name = "mystyle";
    arr = element.className.split(" ");
    if (arr.indexOf(name) == -1) {
        element.className += " " + name;
    }
}
0
Weslbyno19