Я использую rem в качестве ширины элемента, вместо px, и во всех браузерах он выглядит хорошо (например, Android Chrome, Android Firefox, iOS Safari и т. Д.) И позволяет мне удобно масштабировать элементы.
Но на андроиде, в браузерах на движке веб-просмотра (таких как UC Browser, Opera Mini, штатный браузер и т. Д.) Все ломается, потому что
размер шрифта: 1px
просто не работает из-за минимального размера шрифта.
Они уже написали об этой проблеме и даже нашли ответ, но он подходит только для мобильных приложений, а не для сайтов.
Я хотел написать сценарий js, который просматривает все элементы, их свойства css и, если он видит rem, он пересчитывает его. Но getComputedStyle выдает результат в px и выясняет, где rem было невозможно.
Возможно, есть другие способы исправить это?
html {
font-size: 0.1vw;
}
.block {
font-size: 25rem;
width: 500rem;
background: tomato;
margin: 0 auto;
text-align: center;
}
<div class="block">I'm 50% width, but not in a webview.</div>