Chrome добавить отступы вокруг страницы на iPhone с надрезом

Question

На iPhone X (и других iPhone с выемкой) в альбомной ориентации Браузер Google Chrome добавляет дополнительный отступ справа и слева вокруг страницы, а Safari - нет.Как это можно исправить?

Answer 1

iPhone X имеет печально известную выемку и домашнюю панель.Apple не соглашается с этими предметами, если вы явно не укажете это.

Вы можете добавить это, чтобы решить вашу проблему:

padding: env(safe-area-inset);

Источник найден здесь

И исправьте метатег:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">

Это говорит вашему iPhone, чтобы добавить необходимые отступы.

Answer 2

Это давно известная проблема, это легко исправить:

 *{ margin : 0; padding : 0;box-sizing: border-box;}

Иногда вам нужно использовать "-webkit and moz".

-webkit-box-sizing: border-box;-moz-box-sizing: border-box;