CSS несовместимы с конкретными c устройствами?

Question

Обычно я использую 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 Тоблер

Answer 1

Я думаю, что это происходит из-за масштабирования дисплея, которое происходит на устройствах, которые используют дисплеи «Retina».

Без явного указания браузеру учитывать отображение с более высокой плотностью, он будет рассматривать 1 пиксель как 1 пиксель, сделать ваш интерфейс половинным размером (потому что iphone дисплеи умещают вдвое больше пикселей в одно и то же пространство).

Размещение этого meta элемента внутри head вашей страницы, сообщая браузеру, что соответствующий масштаб кажется сделайте трюк.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Вы можете узнать больше об этом на MDN: Использование метатега области просмотра для управления макетом в мобильных браузерах

Кроме того, если у кого-то есть лучшее объяснение / технические подробности того, почему это происходит, не стесняйтесь редактировать мой пост.