IOS грохает экранизацию H5 CSS

CSS

Оригинальный текст из моего блога:Студия Шиба Ину

В гибридном случае вы столкнетесь с ситуацией, когда родной передает полный экран веб-просмотру.На мобильном телефоне iphone Liu Haiping вам нужно сделать вырез на экране и маленькую черную полосу внизу, чтобы адаптироваться.

безопасная зона / безопасная зона

Новая концепция, введенная после iphonex, безопасная область относится к видимому диапазону окна, а содержимое в безопасной области не зависит от углов, корпуса датчика и индикатора «Домой», как показано на рисунке ниже. Показать:

img

viewport-fit

Новая функция iOS11, Apple расширила существующий метатег области просмотра, чтобы адаптировать его к iPhoneX и другим экранам Лю Хайпина.Он используется для установки макета веб-страниц в визуальном окне.Можно установить три значения:

  • авто по умолчанию
  • полностью содержать видимое окноВключатьВеб-контент слева
  • содержимое титульной страницы полностьюпокрытиеВидно окно, т.е. страница полностью заполняет экран, правильно.Адаптация - это главное!

img

<meta name="viewport" content="viewport-fit=cover">

постоянная (безопасная область-вставка-*) функция

Новая функция iOS11, CSS-функция Webkit, используется для установки расстояния между безопасной зоной и границей.Есть четыре предопределенных переменных (единица измерения — px):

  • safe-area-inset-left: расстояние от безопасной зоны до левой границы,Адаптироваться к ландшафту
  • safe-area-inset-right: расстояние от безопасной зоны до правой границы,Адаптироваться к ландшафту
  • safe-area-inset-top: расстояние от безопасной зоны до верхней границы, выемка 44px в вертикальном экране, 20px для серии iphone6,Клавиша адаптации вертикальной челки экрана
  • safe-area-inset-bottom: расстояние от безопасной области до нижней границы, 34 пикселя по вертикали экрана,Клавиша адаптации маленькой черной полосы вертикального экрана

В основе адаптации лежит:Небезопасные поля можно получить с помощью константы(), а затем объединить с отступами или полями для управления элементами страницы, чтобы избежать небезопасных областей.

Webkit добавляет функции CSS в iOS11: env() заменяет константу(), env() рекомендуется в документации, а константа() будет объявлена ​​устаревшей в Safari Technology Preview 41 и бета-версии iOS11.2. В браузерах, не поддерживающих env(), это правило стиля автоматически игнорируется и не влияет на нормальное отображение веб-страниц. Для максимальной совместимости мы можем использовать как константу(), так и env().

padding-bottom: constant(safe-area-inset-bottom); /* iOS 11.0 */
padding-bottom: env(safe-area-inset-bottom); /* iOS 11.2 */

@supports Изолированный режим совместимости

Используйте @supports, чтобы запросить, поддерживает ли модель константу () / env () для достижения совместимой изоляции кода:

@supports ((height: constant(safe-area-inset-top)) or (height: env(safe-area-inset-top))) {
  body {
    /* 适配齐刘海*/
    padding-top: constant(safe-area-inset-top);

    /* 兼容 */
    /* padding-top: env(safe-area-inset-top); */

    /* padding-top: calc(40px(原来的bottom值) + constant(safe-area-inset-top)); */

    /* 适配底部黑条*/
    padding-bottom: constant(safe-area-inset-bottom);
  }
}

но, фактические потребности отдельных Android также успешно войдут в это суждение, поэтому добавьте-webkit-overflow-scrolling: touchРешение может эффективно обойти телефон Android.

Эта ситуация не может быть смоделирована в Chrome и требует реальной машины.

@supports ((height: constant(safe-area-inset-top)) or (height: env(safe-area-inset-top))) and (-webkit-overflow-scrolling: touch) {}

Точная модель, чтобы сделать адаптацию

О модели можно судить по соотношению сторон и соотношению пикселей, а также можно внести определенные изменения:

Эту ситуацию можно смоделировать в хроме

img

/* iphone x / xs / 11 pro*/
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
  
}
/* iphone xr / 11 */
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
  
}
/* iphone xs max / 11 pro max */
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
  
}

Конечно, вы можете использовать SCSS / меньше и т. Д., Напишите глобальные модели переменной, чтобы определить непосредственное использование переменного использования

//scss
// iphone x/xs/11 pro
$device-x: "screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3)";
// iphone xr/11
$device-xr: "screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2)";
// iphone x/xs/11pro max
$device-xmax: "screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3)";

@media #{unquote($device-x)},
       #{unquote($device-xr)},
       #{unquote($device-xmax)} {
        //  do something
       }

жду айфон 12....

Оригинальный текст из моего блога:Студия Шиба Ину

Категории