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

Question

css

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?

Answer 1

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.

Answer 2

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

Answer 3

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

Answer 4

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.

Answer 5

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