Размер мобильного окна просмотра основан на соотношении пикселей CSS, например, Мое устройство (Mi A1) имеет разрешение 1080x1920 с соотношением пикселей CSS 2,55, размер окна просмотра на этом устройстве рассчитывается как
( 1080 / 2.55 ) x ( 1920 / 2.55 ) = 424 x 753.
Соотношение пикселей 2,55 означает, что на каждые 2,55 физических пикселей на устройстве CSS сопоставляет 1 пиксель. Поскольку современные мобильные телефоны имеют более высокое разрешение на маленьких экранах, медиа-запросы в CSS относятся к вычисляемому окну просмотра, а не к физическому разрешению при рендеринге страниц на мобильных телефонах, чтобы обеспечить более крупный просмотр страницы из-за небольшой площади мобильных телефонов.
В то же время это не относится к ноутбукам, потому что с более высоким разрешением они имеют большую площадь. У моего ноутбука разрешение экрана 1366x768 пикселей, и когда я проверяю его размер области просмотра, он оказывается 1366x768 при масштабировании по умолчанию (при просмотре в полноэкранном режиме).
Отметьте свое на этой ручке
<body>
<p id="vpPara"></p>
<p>Changes with zoom-in and zoom-out</p>
<span id="vpSpan"></span>
<p id="screenPara"></p>
<script>
document.getElementsByTagName("body")[0].onload = function(){ vpSize();}
document.getElementsByTagName("body")[0].onresize = function(){ vpSize();}
var cnt = 0;
function vpSize() {
cnt += 1;
var w = document.documentElement.clientWidth,
h = document.documentElement.clientHeight,
screenW = screen.width,
screenH = screen.height;
//document.getElementById("p1").innerHTML = w + "x" + h;
document.getElementById("vpPara").innerHTML = "Viewport Resolution :" + w + "x" + h;
document.getElementById("vpSpan").innerHTML = "resize called "+ cnt +" times";
document.getElementById("screenPara").innerHTML = "Screen Resolution :" + screenW + "x" + screenH;
}
</script>
</body>
person
Vickar
schedule
30.06.2018
