gpt4 book ai didi

html - css vh 和 vw,为什么移动方向时 vw 值不改变?

转载 作者:行者123 更新时间:2023-11-28 04:28:06 31 4
gpt4 key购买 nike

这对我来说是一个很难用谷歌搜索的问题,我只找到了笼统的描述,但并没有解释我的问题。我有一个简单的页面,其中包含用于调整框大小的 css:width=10vw 和 height=10vh

在页面上,我使用 javascript 和 getComputedStyle() 来显示框 (div) 的实际像素。在我的手机上查看时,纵向显示 102x154(高 x 宽),横向显示 54x154(高 x 宽)。

这对我来说似乎很奇怪。为什么vw不换档?可以这么说,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 按预期变化。

我希望我在这里遗漏了一些明显的“陷阱”。

最好的问候, rune

最佳答案

看来我确实忽略了一些东西。在为视口(viewport)添加元标记并设置初始比例时,它起作用了。

感谢所有评论!

干杯, rune

关于html - css vh 和 vw,为什么移动方向时 vw 值不改变?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41868462/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com