[英]JavaScript calculate with viewport width/height
我正在尝试在我的移动 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!
谢谢
基于此站点,您可以在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));
我在我的代码中使用了这个不可思议的问题!
尝试这个:
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];
}
参考: http : //andylangton.co.uk/articles/javascript/get-viewport-size-javascript/
问题是,JS没有40vh
,算算多少像素是如何40vh
首先使用它。 执行1000 - 40vh
时会抛出错误
40vh
表示40 % of viewport height
。 所以window.innerHeight * 0.4 == 40vh
也没有wh
这样的东西,只有vh
(视口高度的百分比)
如果您可以完全编辑页面,最简单的方法是创建一个具有 -40vw 和 -100vh 的 css 类,如下所示:
CSS:
.class{
width: -40vw;
height: -100vh;
}
JS:
element.classList.add("class");
注意:Internet Explorer 9 不支持“classList”。如果您希望它适用于所有浏览器,请改用 JS:
function myFunction() {
var element, name, arr;
element = document.getElementById("myDIV");
name = "mystyle";
arr = element.className.split(" ");
if (arr.indexOf(name) == -1) {
element.className += " " + name;
}
}
你只需要用我认为的引号将它括起来。 var w = window.innerWidth = "40vw" var w = window.innerWidth = "40vw"
这是我的解决方案,您可以使用 CSS;
// calc dynamic customer device height/width
let vh = window.innerHeight * 0.01,
vw = window.innerWidth * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
document.documentElement.style.setProperty('--vw', `${vw}px`);
如何在 CSS 中使用?
如果您将通过此方法使用100vh或100vw ,则应为不兼容的浏览器设置 100vh/100vw。
例子;
.wrapper{
height: 100vh; /* Fallback for browsers that do not support Custom Properties */
height: calc(var(--vh, 1vh) * 100);
}
.slide-container{
height: calc(var(--vh, 1vh) * 100 - var(--menuHeight) - var(--footerHeight));
}
.little-image{
width: calc(var(--vw, 1vw) * 5);
margin-bottom: calc(var(--vh, 1vh) * 1);
}
/* and more.. */
这不是一个通用的解决方案,但如果您使用的页面始终 100% 显示在视口中(即,如果正文不必滚动并且始终与窗口宽度匹配,则它是一个更简单的实现和高度)。
let vh = document.body.getBoundingClientRect().height;
这只需一行代码即可将 vh 变量设置为文档正文的像素值。
对于游戏开发和其他将主体附加到视口的场景很有用。
以 px 为单位获取vmin
function vmin(){
return window.innerHeight < window.innerWidth ? window.innerHeight: window.innerWidth;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.