JavaScript berechnen mit Ansichtsfenster Breite/Höhe

Question

ich einen ansprechenden Punkt in meinem Handy Webview zu setzen versuchen und taten dies:

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

Die bisher große Werke. Die Werte -40 und -100 befinden sich jedoch nicht in der Höhe und Breite des Ansichtsfensters.

Wenn ich dies tun:

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

wie es reagiert, und in Bezug auf das Bildfenster bleiben soll - die JS funktioniert nicht mehr. Ich denke, vh und vw funktioniert nur in CSS? Wie kann ich das in JS erreichen?

Bitte keine JQuery-Lösungen - nur JS!

Dank

Answer 1

Basierend auf this site können Sie folgende Funktion in javascript schreiben die gewünschten Werte zu berechnen:

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

Ich benutzte this unglaubliche Frage in meinem Kabeljau es!

Answer 2

Problem ist, dass JS nicht 40vh hat, berechnen, wie viel Pixel 40vh zuerst, es zu benutzen. Es wird Fehler beim Ausführen 1000 - 40vh

40vh bedeutet 40 % of viewport height. So window.innerHeight * 0.4 == 40vh

Auch ist es nicht so etwas wie wh, nur vh (% der Darstellungshöhe)

Answer 3

Try this:

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]; 
} 

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