问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

Javascript 以像素为单位获取 100vh

社区维基
1
新手上路，请多包涵
<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 并将其设置为 height:100vh 然后检查其 clientHeight 之外？

我还将字体大小设置为 10vh。像素到底是多少？

我没有使用 jQuery。

我知道 100vh 在移动设备上故意比可见视口高，这样浏览器栏就可以在不改变 vh 的情况下改变大小。所以我想要屏幕的大小而不考虑浏览器栏，这就是 vh 所做的。

在此处输入图像描述

原文由 Curtis 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascriptcss
阅读 2k
1 个回答
得票最新
社区维基
1

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

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

所以你可以有一个功能：

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

原文由 Madmadi 发布，翻译遵循 CC BY-SA 3.0 许可协议

查看全部 1 个回答
推荐问题