JavaScript用视口的宽度/高度进行计算 [英] JavaScript calculate with viewport width/height

问题描述

我正在尝试在移动Webview中设置一个响应点，并执行以下操作:

I am trying to set a responsive point in my mobile Webview and did this:

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

到目前为止效果很好.但是值-40和-100不在视口缩放高度和宽度中.

This works great so far. But the values -40 and -100 are not in the viewport scaling height and width.

当我这样做时:

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

因为它应该保持响应并相对于视口-JS不再起作用.我认为vh和vw仅在CSS中起作用?如何在JS中实现呢?

as it should be to stay responsive and relative to the viewport - the JS does not work anymore. I think vh and vw works only in CSS ? How can I achieve this in JS ?

不要使用JQuery解决方案-仅使用JS！

Pleas no JQuery solutions - only JS!

谢谢

推荐答案

基于此网站您可以在 javascript 中编写以下函数来计算所需的值:

Based on this site you can write following function in javascript to calculate your desired values:

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

我在代码中使用了这个令人难以置信的问题！

I used this incredible question in my codes!

这篇关于JavaScript用视口的宽度/高度进行计算的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！