Инструкция по адаптации iphoneX к клиентской странице H5

В настоящее время многие дизайнеры приложений начали обращаться к разработке интерфейса H5, но решение проблемы адаптации для всех моделей iPhone и Android является нашим главным приоритетом. Независимо от того, разрабатываете ли вы приложение или пишете интерфейс H5, вы должны учитывать совместимость с мобильными устройствами.

С момента появления айфона

1. Верхняя панель

Предыдущий клиент всегда использовал метод 20pt для строки состояния + 44pt для панели навигации. С айфона

2. Нижняя панель управления.

С момента появления айфона При этом внизу необходимо оставить пустую безопасную область, а последняя нижняя строка содержимого страницы должна находиться в углу мобильного телефона. Высота этой безопасной области составляет 34 пт.

3. Метод адаптации

В заключение, основываясь на текущих уникальных параметрах мобильного телефона iphoneX, мы можем применить следующий метод адаптации:

(1)метатег

Чтобы адаптироваться к iPhone

 <meta name=viewport content=width=device-width,viewport-fit=cover>

(2) Запросы СМИ

1. Используйте постоянную функцию

Константную функцию можно использовать только в том случае, если установлен viewport-fit=cover.

 @supports(bottom:constant(safe-area-inset-bottom)) { selector {padding-bottom:constant(safe-area-inset-bottom);padding-bottom:calc(30px(предполагаемое значение) + константа(safe-) area-inset-bottom)); //Выбираем метод адаптации в соответствии с реальной ситуацией}}

2. Используйте уникальные параметры модели iphoneX.

 @media only screen и (ширина устройства: 375 пикселей) и (высота устройства: 812 пикселей) и (-webkit-device-pixel-ratio:3) { #buy { padding-bottom:34px }};

(3) решение js (ниже используется Jquery)

 if($(window).width() === 375 && $(window).height() === 724 && window.devicePixelRatio === 3){ #buy { padding-bottom:34px }};

(4) Клиентский протокол

Вы также можете попросить клиента запросить, является ли он iphoneX в соответствии с клиентским протоколом, чтобы обеспечить согласованность с клиентом.

4. Объяснение параметров

Параметры в приведенном выше коде объясняются следующим образом:

• Safe-area-inset-bottom — новая функция в ios11, используемая для установки расстояния между безопасной областью и границей.
• 375 — Ширина устройства iphoneX.
• 812 — Высота устройства iphoneX.
• 3 — Разрешение устройства iphoneX
• 724 — высота устройства iphoneX (812) — высота верхней панели (88)
• 34 — Высота нижней зоны безопасности

Вышеуказанные параметры рассчитываются на основе стандартного 1pt=1px. Если на странице H5 используется метод масштабирования rem, то 1pt = 1px * 3 (разрешение iphoneX).

Выше приведено все содержание этой статьи. Я надеюсь, что содержание этой статьи имеет определенную справочную ценность для каждого человека в учебе или работе. Если у вас есть какие-либо вопросы, вы можете оставить сообщение для связи. Спасибо за вашу поддержку VeVb Wulin. Сеть.