我试图在我的移动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令人难以置信的问题!
问题是JS没有40vh
,计算40vh
首先使用它的像素数。在做1000 - 40vh
时会抛出错误
40vh
意味着40 % of viewport height
。所以window.innerHeight * 0.4 == 40vh
也没有像wh
这样的东西,只有vh
(视口高度的百分比)
试试这个:
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/
如果您可以完全编辑页面,最简单的方法是创建一个具有-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"