Question

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div style='height:4000px;background:#EEE;'>
            <div id=vh style='height:100vh;background:#AFB'>
                100vh
                <br>
                <br>
                <br>
                <button onclick='show()' style='font-size:55px'>
                    Show
                </button>
            </div>
            more stuff
        </div>
        <script>
            var vh=document.getElementById('vh')
            function show()
            {
                alert('window.innerHeight='+window.innerHeight
                +', window.outerHeight='+window.outerHeight
                +', screen.height='+screen.height
                +', document.documentElement.clientHeight='+document.documentElement.clientHeight
                +', vh.clientHeight='+vh.clientHeight)
            }
        </script>
    </body>
</html>

http://curtastic.com/testvh.html

在我的iPad上，100vh div大小为1256像素。（如果你最近的卷轴是向上的）

window.innerHeight是1217。

screen.height是1024。

window.outerHeight为0。

documentElement.clientHeight是4016。

有没有任何方式在javascript中获得这个号码1256？除了制作div并将其设置为高度：100vh然后检查其clientHeight？

我的字体大小设置为10vh。那个像素究竟是什么？

我没有使用jQuery。

我知道100vh比移动设备上的可见视口更高，因此浏览器栏可以改变大小而不改变vh。所以我想要屏幕的大小，无论浏览器是什么，这都是vh所做的。

Answer 1

是因为你在

中遗漏了这个

 <head>

标签？

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

Answer 2

您可以使用offsetHeight或clientHeight来获取px中元素的高度。

offsetHeight属性返回元素的可视高度（以像素为单位），包括填充，边框和滚动条，但不返回边距。

clientHeight属性返回元素的可视高度（以像素为单位），包括填充，但不返回边框，滚动条或边距。

查看差异

var vhele=document.getElementById('vhele')
function show()
{
    console.log(' clientHeight='+vhele.clientHeight+ 'px'+' , Height with padding and border= ' + vhele.offsetHeight + 'px' );
}

body{
margin:0;
}
#vhele{
  padding:15px;
  border:5px solid red;
}

<div id="vhele" style='height:75vh;background:#AFB'>
                100vh
                
                <button onclick='show()' style='font-size:55px'>
                    Show
                </button>
</div>

Answer 3

您可以使用一行代码计算以像素为单位的vh：

let _1vh = Math.round(window.innerHeight / 100)

所以你可以拥有它的功能：

function vhToPixels (vh) {
  return Math.round(window.innerHeight / (100 / vh)) + 'px';
}

Javascript以像素为单位获得100vh

3 个答案: