Javascript以像素为单位获得100vh答案

【问题标题】：Javascript get 100vh in pixelsJavascript以像素为单位获得100vh
【发布时间】：2022-02-08 05:54:45
【问题描述】：

<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 所做的。

【问题讨论】：

它应该是documentElement.clientHeight；这是给我的。不知道你是如何获得 4016 的......
我在 windows 上的 chrome 和 firefox 上也得到 4016。
为什么这被否决了？
我自己没有投反对票，所以不能肯定，但我猜是因为其他人无法复制问题？就像我说的，我自己无法复制这个问题； documentElement.clientHeight 为我提供了正确的结果。也许尝试在问题本身中提供minimal, complete, and verifiable example 并确认问题仍然存在？ :)
您能否更新您的页面以同时显示window.document.body.clientHeight ？

标签： javascript css

【解决方案1】：

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

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

所以你可以为它创建一个函数：

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

【讨论】：

document.documentElement.clientHeight 比屏幕高得多，与 vh 无关。它与页面内容一样高。
不，不存在
效果很好，宽度也很好。
这不适用于移动设备，window.innerHeight 随着 URL 栏的出现和消失而变化。相比之下，100vh 是隐藏 URL 栏时的视口高度。这是关于它的nice article from the Google developers。

【解决方案2】：

您可以使用offsetHeight 或clientHeight 来获取以像素为单位的元素的高度。

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>

【讨论】：

看来这是唯一的方法。总是有一个不可见的 div 高度：100vh；宽度：0；位置：绝对；并检查它的 clientHeight。

【解决方案3】：

是不是因为你错过了这个

 <head>

标签？

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

【讨论】：

没有。好的，我将其添加到示例页面代码中，但我仍然无法获得 100vh 的高度。
在您的 html 中的 head 标签之间添加上述代码后，使用 window.document.body.clientHeight 现在应该为您提供 100vh 等效像素。
这行不通。我更新了屏幕截图和代码显示。工作链接已更新为具有元标记。

【解决方案4】：

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

这是不容忽视的重要背景。 window.innerHeight 并不总是给你一个高度为100vh 的元素的高度。 window.innerHeight 随着 URL 栏的出现和消失而变化。相反，100vh 是仅当隐藏 URL 栏时的视口高度。这里是a nice article from the developers at Google about this subject。

我想出了一个适合我的解决方案。获取高度为100vh 的元素高度的最佳方法是创建该元素并对其进行测量。

<!-- See: `getFullVh()` -->
<div style="overflow: hidden; height: 0">
 <div id="measure-vh" style="position: fixed; height: 100vh"></div>
</div>

然后在你的 JavaScript 中：

/** Return the "largest possible viewport" height in px.
 *
 * What is the "largest possible viewport" height?
 * https://developers.google.com/web/updates/2016/12/url-bar-resizing
 */
const getFullVh = () => {
  return document.querySelector('#measure-vh').clientHeight
}

我的字体大小也设置为 10vh。那到底是多少像素？

使用getFullVh()：

const tenVh = getFullVh() * 0.1

【讨论】：

【解决方案5】：

大多数解决方案的问题是window.innerHeight、screen.height、window.outerHeight、documentElement.clientHeight等不是浏览器页面大小的可靠度量。我发现最好的方法是自己创建规则

const rule = document.createElement('div');
rule.style = 'width:0; height:100vh; position:fixed;';
insertAfter(someOtherElement, rule);
// Then you can use rule.clientHeight with a formula like
const vhToPx = (vh)=>(rule.clientHeight / (100 / vh)) + 'px'

【讨论】：