Это был трудный вопрос для меня в google, я нашел только общие описания, которые не объяснили мою проблему. У меня есть простая страница с css для размера окна: width=10vw and height=10vh.css vh и vw, почему не меняется значение vw при изменении ориентации?
На странице Я использую javascript и getComputedStyle() для отображения фактических пикселей окна (div). При просмотре на мобильном телефоне он скажет 102x154 (высота x ширина) в портрете и 54x154 (высота x ширина) в ландшафте.
Это кажется мне странным. Почему не меняется VW? Должны ли как vh, так и vw торговать местами, так сказать?
EDIT: Я теперь, как некоторый код, чтобы показать:
<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 никогда не меняется. Строка изменяется, как ожидалось.
Надеюсь, что у меня отсутствуют некоторые очевидные «gotchas» здесь.
С наилучшими пожеланиями, Rune
Возможно некоторое содержание не расширяет вашу высоту независимо от того, что вы установили? – Justinas
Вы уверены, что когда вы проверяете элемент на мобильном телефоне и меняете его с постороннего на пейзаж, разрешение экрана A x B и B x A? может быть, это проблема. они должны торговать местами. или попытайтесь установить «max-height» и «max-width» также, чтобы содержимое поля не увеличивало высоту или ширину. –
Это меняет в этом пером https://codepen.io/adogandesign/full/ WRZmNv/ Я использую эмулятор устройства Google Chrome, а также –