Viewport-fit = cover больше не работает на iOS Safari? - PullRequest
Новая
       2

Viewport-fit = cover больше не работает на iOS Safari?

0 голосов
/ 10 февраля 2020

Я хочу sh, чтобы использовать 100% ширину экрана на iOS Safari для заголовка моего веб-сайта на устройстве с надрезом iOS / Android и для этого я добавил следующий viewport meta_tag на свой page <head></head>: 

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>

Затем на элементе <header> моей страницы я указал css ширину 100% (или 100vmin). Мне не нужно использовать env(safe-area-insets) отступы ни на одной из моих веб-страниц, потому что они имеют определенный стиль.

Это в значительной степени то, как Apple описала iOS веб-API Safari для iPhone с надрезом в официальной документации , но, похоже, она не работает!

Я что-то упустил?

Редактирует: Я на iOS Safari 13.3.1 на iPhone 11 Pro Max.

1 Ответ

1 голос
/ 31 марта 2020

По состоянию на конец 2019 года Apple теперь рекомендует использовать запрос @supports(padding:max(0px)) { env() } для обнаружения и исправления среды с надрезом для вашего сайта, например: 

@supports(padding:max(0px)) {
    body, header, footer {
        padding-left: min(0vmin, env(safe-area-inset-left));
        padding-right: min(0vmin, env(safe-area-inset-right));
    }
}

Обсуждается запрос выше и css в длину более здесь .

...