JavaScript使用视口宽度/高度计算

前端之家收集整理的这篇文章主要介绍了JavaScript使用视口宽度/高度计算前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图在我的移动Webview中设置响应点并执行此操作:
var w = window.innerWidth-40;
var h = window.innerHeight-100;

到目前为止这很有用.但值-40和-100不在视口缩放高度和宽度中.

我这样做的时候:

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

因为它应该保持响应和相对于视口 – JS不再工作.
我认为vh和vw只适用于CSS?
我怎样才能在JS中实现这一目标?

请求没有JQuery解决方案 – 只有JS!

谢谢

解决方法

基于 this site,您可以在javascript中编写以下函数来计算您想要的值:
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));

我在我的代码中使用了this令人难以置信的问题!

猜你在找的JavaScript相关文章