JavaScript calculer avec une largeur viewport/hauteur

Question

Je suis en train de définir un point sensible dans mon Webview mobile et fait cela:

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 sont pas dans la hauteur et la largeur de mise à l'échelle de la fenêtre.

Quand je fais cela:

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

comme il devrait être de rester réactif et par rapport à la fenêtre - JS ne fonctionne plus. Je pense que vh et vw ne fonctionne que dans CSS? Comment puis-je réaliser cela dans JS?

Pleas pas de solutions JQuery - seulement JS!

Merci

Answer 1

Basé sur this site vous pouvez écrire la fonction suivante dans javascript pour calculer vos 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é this question incroyable dans ma morue es!

Answer 2

problème est que JS n'a pas 40vh, calculer combien de pixels est 40vh premier à l'utiliser. Il va lancer une erreur lorsque vous faites 1000 - 40vh

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

De plus il n'y a pas une telle chose comme wh, seulement vh (% de la hauteur de la fenêtre)

Answer 3

Essayez ceci:

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/