Одновременно несвязанные изменения CSS влияют на значение window.innerWidth и window.innerHeight в Chrome
Все работает нормально на обычной странице Chrome на компьютере, но как только я переключаю панель инструментов устройства и просматриваю свой веб-сайт, скажем, с iPhone 12 (любое устройство в портретном режиме работает), значение, заданное window.innerWidth и window. InternalHeight (хотя и в правильном соотношении) больше, чем предполагаемое разрешение, чего, как ни странно, не происходит на устройствах в ландшафтном режиме (например, на гнездовом концентраторе), но также отлично работает в портретном режиме, когда я возвращаюсь к предварительному просмотру своего изображения. веб-сайт в обычном окне Chrome.
Вот минимальная HTML-страница, воспроизводящая ошибку:
let canvas = document.getElementById('canvas');
// set canvas resolution
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
console.info(window.innerWidth, window.innerHeight);
// fill canvas with black
let ctx = canvas.getContext('2d');
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, canvas.width, canvas.height); html,
body {
font-family: "Helvetica";
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
input {
z-index: 1;
position: absolute;
top: 50%;
left: 50%;
margin: 0;
background: none;
outline: none;
border: none;
color: white;
font-size: 48px;
font-weight: bolder;
text-align: center;
transform: translateX(-50%) translateY(-50%);
mix-blend-mode: difference;
}
#canvas {
position: absolute;
top: 0;
left: 0;
padding: 0%;
margin: 0%;
z-index: -1;
}<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id = "canvas"></canvas>
<input id = "input" value = "Hello, World!"></input>
</body>
</html>По некоторым причинам удаление строки font-size: 48px устраняет проблему; почему некоторые CSS влияют на JavaScript?? Этого не происходит в Firefox, и всегда указывается правильное значение, хотя вы все равно можете прокручивать страницу, как на большом холсте, созданном в Chrome.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Проблема здесь связана с разницей в том, как браузеры вычисляют эти значения при переполнении элемента body, даже если он оформлен как hidden. Причина, по которой удаление правила font-size: 48px решает проблему, заключается в том, что установка абсолютного размера текста приводит к тому, что элемент input становится шире, чем у элемента body есть место для размеров устройства, на котором вы тестируете, что, похоже, сбивает с толку Chrome. Если вы проверите портретный режим на достаточно большом устройстве, например планшете, вы увидите, что регистрируются точные значения. По какой-то причине Firefox может игнорировать переполнение за пределами окна при вычислении внутренней ширины и внутренней высоты, но Chrome с этим справляется. (Как ни странно, ширина, о которой сообщает Chrome, все еще меньше ширины переполненного элемента...)
Одним из решений было бы изменить CSS, чтобы использовать относительный размер текста, например ems. В этом случае ввод не переполняет body, и у Chrome нет проблем. Однако из-за относительности это означает, что текст будет масштабироваться в зависимости от размера экрана, что может быть желательным, а может и не быть желательным. Если вам абсолютно необходимо, чтобы текст отображался в абсолютном размере, вы можете проверить этот ответ на другой вопрос о том, что Chrome странно относится к window размерам, и попробовать другой способ получения размеров области просмотра.
TL;DR Использование px вместо чего-то вроде % или em приводит к переполнению элемента body. Попробуйте изменить размер текста на относительный, и если это не сработает или нереалистично, возможно, вам придется воспользоваться другим методом определения размера экрана.
Надеюсь, одно из этих решений поможет!
Обновлено: Видимо, в Chrome есть особый способ получения только видимого окна просмотра window.visualViewport.width (См. документацию здесь). Однако, немного повозившись с ним, установка размера холста, кажется, заставляет всю страницу немного действовать. как ни странно, может потребоваться некоторая настройка, чтобы заставить его делать то, что вам нужно.
Возможный дубликат: stackoverflow.com/questions/36297612/…