У меня есть веб-приложение, подобное моему изображению 1 ниже, все выглядит хорошо.Проблема в том, что, когда приложение запускается на мобильном устройстве с надрезом, оно создает проблему с макетом, как вы можете видеть на рисунке 2. И я не могу использовать «безопасную область», потому что некоторые из моих страниц должны зависнутьсверху, как на изображении 3.
Я легко могу решить эту проблему, добавив медиазапросы, чтобы добавить отступ над содержимым на iPhone X, но проблема в том, что не только iPhone X имеет метку.
В идеале должен существовать метод JS для обнаружения мобильных телефонов с выемкой (и возвращать высоту этой отметки было бы еще лучше). Но возможно ли это?Если нет, то как лучше решить эту проблему?Нужно ли создавать медиа-запросы для каждого смартфона в мире?