Chrome 在 iPhone 上的页面周围添加了一个缺口

Question

在 iPhone X（和其他带有凹槽的 iPhone）上，Google Chrome 浏览器在横向的 Google Chrome 浏览器上会在页面的左右两侧添加额外的填充，而 Safari 则不会。怎么可能解决这个问题？

Answer 1

iPhone X 有一个臭名昭著的刘海屏和 Home bar。除非您明确告知，否则 Apple 不满足于这些项目。

你可以添加这个来解决你的问题：

padding: env(safe-area-inset);

来源找到here

并修复元标记：

<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;