Как решать проблемы позиционирования элементов тех же последних айфонов?

Question

[lexstile]

Задача: сделать разными размеры хедера/футера, отличные от других девайсов отступы и т. п.
Плюс, у некоторых девайсов закругленные дисплеи, нужно иначе отображать угловые элементы.

Можно ли как-то точно определить, что это iphone xr и решить проблемы с бровями/груглым экраном?

Comments

[mipfikus]

Вы проверяли на этих устройствах? может быть там выглядит так?

[lexstile]

mipfikus, проверяли, не так

Answer 1

[Иван Недзвецкий]

Идея в том, чтобы добавлять отступы от краев экрана чтобы челки не закрывали контент

padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);

В этой статье https://css-live.ru/articles/ponimanie-vyuporta-we... есть объяснение что как и почему на iOS устройствах.

Comments

[lexstile]

Интересно, благодарю.