Как написать нижнюю навигацию для iPhoneX

внешний интерфейс

введение

С момента выхода iPhoneX прошел почти год, все виды приложений были в той или иной степени адаптированы для iPhoneX, так что же мы должны адаптировать к нашей странице H5?

Сначала разберитесь с концепцией безопасной области, которая гарантирует, что содержимое правильно встраивается в устройство и не будет закрыто строками состояния, панелями навигации и т. д.

Apps should adhere to the safe area and layout margins defined by UIKit, which ensure appropriate insetting based on the device and context. The safe area also prevents content from underlapping the status bar, navigation bar, toolbar, and tab bar.

-- by Apple's Human Interface Guidelines

фигура 1

Для страниц h5 он обычно открывается в «контейнере», таком как браузер или веб-просмотр приложения, и большинство этих контейнеров адаптированы следующим образом:

фигура 2

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

Не учитывая горизонтальный просмотр экрана, нам нужно только адаптировать нижнюю навигацию~

Как показано на рисунке ниже, высота опасной области в нижней части iPhoneX составляет 34 пикселя, а соответствующее значение пикселя страницы @3x составляет 102 пикселя. Мы можем адаптировать нижнюю навигацию в соответствии с этим значением.

изображение 3

Три метода адаптации донной навигации

1. базовая реализация js

    

  1. var isIphoneX = window.devicePixelRatio && window.devicePixelRatio === 3 && window.screen.width === 375 && testUA('iPhone')
    2. 

  2. if (isIphoneX) {
    3. 

  3.   document.body.classList.add('fix-iphonex-bottom')
    4. 

  4. }
    5. 

  5. function testUA (str) {
    6. 

  6.   return navigator.userAgent.indexOf(str) > -1
    7. 

  7. }
    8. 

скопировать код
    

  1. .fix-iphonex-bottom .navi[data-v-539b7842]{
    2. 

  2.   padding-bottom: 34px;
    3. 

  3. }
    4. 

скопировать код

demo:

2.js динамическая адаптация

Как показано на рисунке 2 выше, для браузеров с нижней панелью мы можем выполнить динамическую адаптацию, когда нижняя панель отображается или скрывается во время прокрутки страницы:

    

  1. var isIphoneX = window.devicePixelRatio && window.devicePixelRatio === 3 && window.screen.width === 375 && testUA('iPhone')
    2. 

  2. if (isIphoneX) {
    3. 

  3.   check()
    4. 

  4.   window.onscroll = throttle(check, 200)
    5. 

  5. }
    6. 

  6. function check () {
    7. 

  7.   // 处理lib-flexible放大viewport的情况
    8. 

  8.   var scale = window.innerWidth / window.screen.width
    9. 

  9.   // 部分浏览器在滚动页面时会显示/隐藏工具栏，影响视口高度。在有底部工具栏的情况下，不做iPhoneX的fix。100为经验值
    10. 

  10.   if (window.screen.height - window.innerHeight / scale < 100) {
    11. 

  11.     document.body.classList.add('fix-iphonex-bottom')
    12. 

  12.   } else {
    13. 

  13.     document.body.classList.remove('fix-iphonex-bottom')
    14. 

  14.   }
    15. 

  15. }
    16. 

  16. function testUA (str) {
    17. 

  17.   return navigator.userAgent.indexOf(str) > -1
    18. 

  18. }
    19. 

скопировать код

Эффект:

 demo:

3. добиться чистого css

In order to handle any adjustment that may be required iOS 11's version of Safari includes some constants that can be used when viewport-fit=cover is being used.

  • safe-area-inset-top

  • safe-area-inset-right

  • safe-area-inset-left

  • safe-area-inset-bottom

Чтобы лучше адаптироваться к версии Safari IOS 11, предусмотрены вышеуказанные переменные. и когдаviewport-fit=coverможно использовать в css.

Сначала установите метатег

  1. <meta name=“viewport” content=”initial-scale=1, viewport-fit=cover”>
скопировать код

Тогда мы можем использоватьconstant()(IOS 11.0-11.2) илиenv()(>IOS 11.2) для ссылки на вышеуказанную переменную

    

  1. .selector{
    2. 

  2.   /* 利用css fallback机制，下面的代码可以兼容两种版本 */
    3. 

  3.   padding-top: env(safe-area-inset-top);
    4. 

  4.   padding-top: constant(safe-area-inset-top);
    5. 

  5. }
    6. 

скопировать код

Если вам нужно рассчитать на основе этих переменных, вы можете написать:

    

  1. .selector{
    2. 

  2.   --safe-area-inset-bottom: env(safe-area-inset-bottom);
    3. 

  3.   height: calc(80px + var(--safe-area-inset-bottom));
    4. 

  4. }
    5. 

скопировать код

требует внимания,safe-area-inset-bottomФактическое значение этой переменной в пикселях фиксировано (около 34 пикселей) и должно быть пересчитано, если мы масштабируем страницу. Например, в нашем проекте используется гибкая схема вёрстки Taobao, реальная ширина страницы на iPhoneX составляет 1125 пикселей, на данный момент высота безопасной области внизу страницы должна быть равна этому значению.три раза:

    

  1. .selector{
    2. 

  2.   padding-bottom: calc(env(safe-area-inset-bottom) * 3);
    3. 

  3. }
    4. 

скопировать код

demo:

Суммировать

В реализации js нет ничего плохого, за исключением того, что она не элегантна Реализация css зависит от версии ios11 Safari и имеет проблемы с совместимостью (тест показал, что браузер QQ с ядром AppleWebkit/604.3.5 не поддерживает его ,и другие браузеры нормальные.С каким совместим?Соответствующей информации по версии не нашел)

Все адреса демо: https://marvinxu.github.io/demos/

References

  1. iPhone X - Overview - iOS Human Interface Guidelines

  2. Узнайте размер и адаптацию дизайна iPhoneX за три минуты

  3. «Выемка» и CSS

  4. Designing Websites for iPhone X

  5. Особенности макета iPhone X с переменными среды CSS (необходимо перевернуть стену)

  6. CSS Round Display Level 1

Категории