Давайте сначала посмотрим, как выглядит модель iPhone X.
На рисунке выше модель Iphonex имеет эти две новые области сверху и снизу, поэтому нам нужно внести некоторые изменения в модель этого типа, чтобы облегчить отображение нашего веб-приложения.
Для мобильных страниц, созданных из h5, общий макет — это трехколоночный режим «голова + торс + низ». Голова и верх фиксированно расположены, а содержимое торса можно прокручивать. Предварительный макет выглядит следующим образом:
<div class=page> <header></header> <main></main> <footer></footer> </div>
Однако, если вы не используете новые атрибуты CSS Iphone. В этой ситуации панель навигации внизу блокируется индикатором дыхания, который поставляется с Iphone. Проверено несколько решений.
Я использую структуру vue. На странице index.html нам нужно добавить.
<meta name=viewport content=width=device-width,viewport-fit=cover>
Затем на общедоступной странице app.vue отображение каждого из наших компонентов заменяется здесь представлением маршрутизатора, поэтому здесь можно обрабатывать общедоступную панель заголовка. Конкретный макет выглядит следующим образом:
<template><div id=app><div class=placeholder_top :style={position:fixpositiona?'absolute':'fixed'}></div><router-view class=routerview></router-view>< /div></шаблон>В приведенном выше макете мы пишем следующее для элемента div с классом Placeholder_top:
.placeholder_top {позиция: фиксированная; верхняя: 0; ширина: 10rem; цвет фона: #303030; высота: константа (безопасная область-вставка-верх); ); z-индекс: 999;}В этом случае нам больше не придется иметь дело с проблемой верхней панели для отдельных компонентов в будущем. Далее мы можем решить проблему с заголовками, упомянутую ранее. Как правило, большинство заголовков будут инкапсулированы в общедоступные компоненты. Здесь из-за влияния элемента, который мы вставили на страницу app.vue, метод написания CSS нашей головы также необходимо немного изменить. Макет страницы компонента head выглядит следующим образом:
<template><header> <div class=title :style={position:fixposition?'absolute':'fixed'}> Содержимое навигации</div> <div class=placeholder></div> </header></ шаблон>CSS страницы:
заголовок {background-color: # 303030; .title {позиция: фиксированная; верх: 0; верх: константа (безопасная область-вставка-верх); высота: 88 пикселей; z-индекс: 999 } .placeholder{ высота: 88 пикселей; ширина: 10рем;Написанная таким образом, главная панель навигации будет расположена под строкой состояния мобильного телефона, не будет влиять на окно и совместима с моделями Android и iOS (такие проблемы совместимости также связаны с системными проблемами с iOS, но эта статья еще не реализована). вовлеченный)
Теперь давайте посмотрим на обработку основной области. Поскольку приведенный выше компонент заголовка был обработан, основной макет выглядит следующим образом:
main {padding-top:constant(safe-area-inset-top);padding-top: env(safe-area-inset-top);padding-bottom: Calc(88px + константа(safe-area-inset-bottom) );padding-bottom: Calc(88px + env(safe-area-inset-bottom));PS: Позвольте мне объяснить здесь. Следующие две строки используются, когда на текущей странице нет нижней панели навигации.
отступ-дно: константа (безопасная область-вставка-дно); отступ-дно: env (безопасная область-вставка-дно);},
Основной макет готов, осталось только написать контент.
Затем посмотрите на макет нижнего колонтитула внизу.
<template><footer> <div class=foot :style={position:fixposition?'absolute':'fixed'}> Нижнее содержимое</div></footer></template>CSS нижнего содержимого выглядит следующим образом:
нижний колонтитул {позиция: фиксированная; нижняя: 0; ширина: 10rem; высота: Calc (88 пикселей + константа (безопасная область-вставка-дно)); внизу)); цвет фона: #303030; .foot{ позиция: абсолютная; сверху: 0; ширина: 10рем; 88 пикселей }}Написанный таким образом контент в нижней части навигационной панели не будет блокироваться индикатором, поставляемым в комплекте с телефоном.
Итак, мы можем резюмировать, что метод написания CSS, который нам может понадобиться в такой адаптации веб-приложения, выглядит следующим образом:
позиция: фиксированная; верх: константа (вставка-безопасная область-верх); верх: env (вставка-безопасная область-верх); низ: константа (вставка-безопасная область-низ); -inset-bottom); верх: Calc(1rem + константа(безопасная зона-вставка-верх)); верх: Calc(1rem + env(безопасная зона-вставка-верх)); Calc(1rem + Constant(безопасная область-вставка-дно)); Calc(1rem + env(безопасная область-вставка-дно));
ps: В приведенном выше письме написано: style={position:fixposition?'absolute':'fixed'}. Это необходимо для решения проблемы неточного позиционирования таких фиксированных элементов, когда пользователь нажимает на поле ввода и появляется мягкая клавиатура. Если вам интересно, вы можете изучить ее. В этой статье она пока не обсуждается.
Здесь можно использовать разные методы написания в соответствии с реальными потребностями. Рекомендуется не слишком сильно отклоняться от общей логики макета. Так написано для унифицированной обработки и удобного обслуживания. Кроме того, если есть проблемы с реальным машинным тестированием и стилем. из-за совместимости макета можно использовать реальную машинную отладку. Метод заключается в использовании браузера ПК для отладки веб-приложения и просмотра элементов. Это может в основном решить большинство проблем со стилем. В следующий раз я напишу о реальной машинной отладке.
Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.