Как обнаружить мобильную метку? - PullRequest
0 голосов
/ 14 декабря 2018

У меня есть веб-приложение, подобное моему изображению 1 ниже, все выглядит хорошо.Проблема в том, что, когда приложение запускается на мобильном устройстве с надрезом, оно создает проблему с макетом, как вы можете видеть на рисунке 2. И я не могу использовать «безопасную область», потому что некоторые из моих страниц должны зависнутьсверху, как на изображении 3.

Я легко могу решить эту проблему, добавив медиазапросы, чтобы добавить отступ над содержимым на iPhone X, но проблема в том, что не только iPhone X имеет метку.

В идеале должен существовать метод JS для обнаружения мобильных телефонов с выемкой (и возвращать высоту этой отметки было бы еще лучше). Но возможно ли это?Если нет, то как лучше решить эту проблему?Нужно ли создавать медиа-запросы для каждого смартфона в мире?

enter image description here

1 Ответ

0 голосов
/ 14 декабря 2018

HTML ::

meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" 

CSS ::

padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...