У меня проблема с сайтом Angular с отступами, который появляется только в мобильном Safari. Я пытаюсь ответить на него с помощью медиа-запросов, но пока ни один из них не вступает в силу. Я использую симулятор iOS с iPhone 11. Я пробовал:
@media only screen
and (min-device-width: 375px)
and (max-device-width: 812px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait)
@media only screen
and (device-width: 414px)
and (device-height: 896px)
and (-webkit-device-pixel-ratio: 2)
@media only screen
and (min-width: 375px)
and (max-width: 767px)
Я получил их из различных поисков iPhone 11. Симулятор не применяет изменения. Я также включил это в индекс. html: <meta name="viewport" content="width=device-width, initial-scale=1.0">
Так выглядит проблема в мобильном сафари, где элемент обрезается сверху.
Интересно, что на макете Chrome dev tools iPhone он действительно применяет стиль. Проблема заключается в том, что проблема не возникает на Chrome, поэтому она заканчивается применением наложения, как показано ниже:
Таким образом, исходя из этого, Я думаю, что запросы правильно применяются, но они просто не принимаются мобильным Safari. Я не уверен, что я скучаю. Заранее благодарю за любую помощь.
РЕДАКТИРОВАТЬ: последнее посещение с min-width вместо min-device-width все еще не работает.
@media only screen
and (min-width: 375px)
and (max-width: 812px)
and (-webkit-min-device-pixel-ratio: 3)
and (orientation: portrait)