How to solve the problems of positioning elements of the same latest iPhones?

L

lexstile2020-06-09 19:31:46

css

lexstile, 2020-06-09 19:31:46

Task: make header/footer sizes different, padding different from other devices, etc.
Plus, some devices have rounded displays, you need to display corner elements differently.

Is it possible to somehow accurately determine that it is an iphone xr and solve problems with eyebrows / round screen?

Reply

Answer the question

In order to leave comments, you need to log in

5 answer(s)

I

Ivan Nedzvetsky, 2020-06-09
@lexstile

The idea is to add padding from the edges of the screen so that the bangs don't cover the content
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);
This article https://css-live.ru/articles/ponimanie-vyuporta-we... has an explanation of how and why on iOS devices.

K

Konstantin Velichko, 2014-07-12
@JaneHolland

dimox.name/jquery-form-styler is
a good plugin, I recommend it
works on both mobile phones and ie7

G

Grag, 2014-07-11
@Grag

Here . There are a couple of bugs, but the rules work. For mobile phones and tablets, you can drive everything yourself.

V

Vitaly Kirenkov, 2014-07-12
@DeLaVega

Personally, I would recommend doing this without js, because the native select is cross-browser and cross-platform. As a rule, the whole problem of styling rests on the arrow. So the initial view can be styled with a clean css. Habra example.
If you have any questions regarding how it works, please contact us.

P

pauletik, 2015-03-30
@pauletik

kate-land.net/html-css/item/336-cross-browser-style...