Ключом к адаптации IphoneX является адаптация страницы к выемкам, нижней рабочей области и большим закругленным углам.
По сравнению с другими мобильными телефонами отличие IphoneX в том, что хоть у устройства и один экран, он фактически разделен на несколько модулей. Подробности смотрите на рисунке ниже:
Когда мы перемещаем обычную веб-страницу в X, контент отображается только в безопасной области, а в небезопасной области веб-контент отсутствует. Это означает, что вверху и внизу появятся белые блоки. справиться с этим?
Решение 1. Добавьте цвет фона к телуЗачем добавлять цвет фона? Какая польза? Обратите внимание, что на голове и нижней части тела будут белые пятна, о которых мы только что упомянули. На самом деле было бы неправильно сказать, что это белый цвет, потому что этот цвет на самом деле происходит от цвета фона тела. Кроме того, когда мы поднимаем или опускаем контент, будут отображаться содержимое и цвет внизу веб-страницы, который на самом деле является цветом фона тела. Итак, если вы хотите изменить эти два эффекта, вы можете установить цвет фона тела.
2. Добавьте тег <meta> viewport-fit = Cover.Этот шаг чрезвычайно важен. Сначала посмотрим на результаты:
Скопировать код