Как на Android узнать реальное разрешение экрана/окна браузера из JS? Как на Android задать элементу размер в реальных пикселях?
Товарищ делает некое внутреннее корпоративное web-приложение под заранее известные модели смартфонов с заранее известными разрешениями экранов. По ходу выполнения работ заметили, что браузерное разрешение не совпадает с реальным разрешением экрана.
Была сделана тестовая web-страничка со следующим кодом:
const dataEl = document.querySelector('.data');
const data = {};
update();
window.addEventListener('resize', update);
document.documentElement.addEventListener('resize', update);
document.body.addEventListener('resize', update);
function update() {
Object.assign(data, {
htmlClientWidth: document.documentElement.clientWidth,
htmlClientHeight: document.documentElement.clientHeight,
bodyClientWidth: document.body.clientWidth,
bodyClientHeight: document.body.clientHeight,
bodyPageWidth: document.body.pageWidth,
bodyPageHeight: document.body.pageHeight,
screenWidth: screen.width,
screenHeight: screen.height,
screenAvailWidth: screen.availWidth,
screenAvailHeight: screen.availHeight,
windowInnerWidth: window.innerWidth,
windowInnerHeight: window.innerHeight,
windowOuterWidth: window.outerWidth,
windowOuterHeight: window.outerHeight,
windowDevicePixelRatio: window.devicePixelRatio
});
dataEl.innerHTML = JSON.stringify(data, null, 2);
}html,
body,
.data {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
}
.box {
position: fixed;
width: 500px;
height: 500px;
right: 0;
bottom: 0;
background: blue;
}<html>
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
</head>
<body>
<pre class="data">
</pre>
<div class='box'></div>
</body>
</html>А отображается она примерно так:
По файлу скриншота должно быть видно (если хостинг не сожмёт картинку), что разрешение экрана 1080х2160.
Значения параметров также видны на скриншоте. Блок, которому заданы широта и высота по 500px, на скриншоте имеет размер в 960 пикселей.
Собственно, вопрос, что это за браузерная самодеятельность? Существуют ли нормальные браузеры и эмуляторы web-view, которые отображают всякие векторные изображения, которые делались специально для отображения разной мелко-пиксельной информации без всякого попадания ровных горизонтальных и вертикальных линий в между-пиксельные пространства?