Обычно я использую Google как можно больше, но я даже не знал, как go исследовать эту проблему.
Я прошел через проект Odin, чтобы улучшить свои навыки разработки интерфейса , поэтому я создал проект калькулятора. В моем калькуляторе используется сетка CSS для размещения кнопок и окна отображения, поэтому в моем скрипте я учел точки останова, в которых калькулятор начинал выходить за пределы экрана:
.calculator {
height: 100vh;
height: calc(var(--vh, 1vh) * 100);
display: grid;
grid-template-columns: repeat(4, 100px);
grid-template-rows: 120px repeat(5, 100px);
justify-content: center;
align-content: center;
}
@media (max-width: 400px), (max-height: 620px) {
.calculator {
grid-template-columns: repeat(4, 80px);
grid-template-rows: 100px repeat(5, 80px);
}
button {
font-size: 1.8em;
}
}
@media (max-width: 320px), (max-height: 500px) {
.calculator {
grid-template-columns: repeat(4, 60px);
grid-template-rows: 80px repeat(5, 60px);
}
button {
font-size: 1.6em;
}
}
Я тестировал точки останова, используя режим адаптивного дизайна в моем браузере; все заработало. Затем я проверил свой телефон, и он не работал. Он был значительно меньше, чем предполагалось.
Итак, я решил нажать кнопку iPhone в режиме адаптивного дизайна, и, конечно же, он был маленьким. Но как только я изменил размер окна вручную, оно заработало, как указано в CSS выше.
Вы можете проверить это на себе на https://cstobler.github.io/calculator/
Полный код находится на моем github по адресу https://github.com/cstobler/calculator
Еще одна вещь, вы можете заметить, что тело имеет свойство стиля --vh. Это устанавливается с использованием этого JS:
const setVH = () => document.body.style.setProperty("--vh", `${window.innerHeight * 0.01}px`);
setVH();
window.addEventListener("resize", setVH());
и может быть найдено в CSS выше, используемом для расчета высоты. Проблема была до того, как я добавил этот код, но я прочитал на CSS Уловках, что это решение можно использовать для исправления проблем с окном просмотра, связанных с iOS адресной строкой.
После небольшого тестирования я понятия не имею, почему это происходит, или как это исправить. Может ли кто-нибудь указать мне в правильном направлении?
Заранее спасибо,
Чарл ie Тоблер