Question

这对我来说是一个很难的问题谷歌，我只找到了一般性描述并没有解释我的问题。我有一个简单的页面，用css来调整框大小：width=10vw and height=10vh。

在页面上，我使用javascript和getComputedStyle（）来显示框（div）的实际像素。在我的手机上查看时，它会以纵向显示102x154（高x宽），并在横向显示54x154（高x宽）。

这对我来说很奇怪。为什么不转变？不管怎么说vh和vw交易的地方都可以呢？

编辑：我现在如何显示一些代码：

    <style>
body{
    font-size:8vw;
}
#box
{
    width:15vw;
    height:15vh;
    background-color:silver;
}
</style>
</head>
<body>

    <div id="box">Test</div>

    <script>
        window.onresize =resize;
        resize();
        function resize()
        {
            var el = document.getElementById("box");
            var st = window.getComputedStyle(el);
            el.innerText = st.height + " x " + st.width;
        }
    </script>
</body>

我已使用Google Chrome设备模拟器切换设备和方向对此进行了测试。我已根据方向验证了分辨率的变化。但是，st.width永远不会改变。 st.height按预期更改。

我希望我在这里找不到一些明显的“陷阱”。

祝你好运，符文

Answer 1

看来我确实忽视了一些事情。为视口添加元标记并设置初始比例时，它可以正常工作。

感谢所有评论！

干杯，符文

css vh和vw，为什么在改变方向时vw值不会改变？

1 个答案: