后端开发教程 - Java、Spring Boot 实战 - msg200.com
提升您的 Web 开发技能
输入 viewport-fit 元标记和 CSS 环境变量。
如果你喜欢 iPhone X、XS、XR 或 XS Max 的刘海屏，请举手！🙋🏻♀️🙋♂️
好吧，举手的人不多，但我相信作为一名开发者，你肯定喜欢屏幕上能多一些“空间”。一块漂亮的无边框显示屏——好吧，差不多——能让大多数人觉得顶部边框的凹口不那么碍眼。
事实上，对于大多数纵向模式的网站来说，这甚至不是什么问题。
横向观看时，凹口会戳到眼睛。
以 dev.to 为例：
我不知道您是否能从图片中看清楚，但标题在左右两侧都突然结束，给人一种布局错误的感觉。Youtube.com 上的情况更是如此，也更糟糕：
糟糕的。
这个问题在 YouTube 上尤其糟糕，因为我通常以横向模式观看视频，每次看完视频后，我都会看到这个明显的虫子，上面全是血红色。🤢
这里需要注意的是，上面讨论的所有网站width在布局中都将页眉设置为 100%。因此，人们通常认为页眉会占据整个屏幕宽度。但事实并非如此。只是像 Safari 这样的浏览器，甚至iOS 上的Chrome v69等浏览器，会在页面上添加一些额外的边距，从而避免内容被刘海遮挡，从而引入了这些白条。
他们称之为safe area利润。
输入 viewport-fit 元标记和 CSS 环境变量。
这里有一个简单的解决方法，可以充分利用所有额外的空间。要让浏览器扩展到刘海区域，请将viewport-fit属性设置cover为：
<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>
这样应该就能解决问题了，尤其是sticky顶部的标题。如果你想使用整个屏幕区域，但同时又不让内容进入刘海，可以使用css如下环境变量：
.content {
padding: 16px;
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}
/* Basically there are four CSS rule options to handle
the notch from all four sides of the iPhone. I don't
recommend using them though!
padding: env(safe-area-inset-top)
env(safe-area-inset-right)
env(safe-area-inset-bottom)
env(safe-area-inset-left);
*/
正确解决内容主体左右填充问题的另一种方法是简单地使用width定义@media-query，如下所示：
@media only screen and (orientation: portrait) {
body {
.shrink {
width: 95%;
}
}
}
@media only screen and (orientation: landscape) {
body {
.shrink {
width: 90%; // Shrink a little extra to avoid the notch.
}
}
}
.center {
text-align: center;
margin: 0 auto;
}
然后，在你的 HTML 中，main容器元素可以与css类一起使用，只需一个规则定义即可在所有设备和所有shrink center视口上工作。我更喜欢这样做，以避免使用类似 的设备特定 hack 。safe-area-insets
<header>
<!--Sticky header with 100% width across and above the notch -->
<header>
<main class="shrink center">
<!-- Body goes here -->
</main>
<footer>
<!-- Full screen width under the notch -->
</footer>
这就是Bubblin Superbooks从 Apple Watch 到 iPad 到台式机再到电视机的扩展方式。🎩
市面上有一些其他围绕刘海屏的巧妙解决方案，JavaScript但真的不推荐。有点矫枉过正。更少的代码意味着更好的可维护性。同样，更少的 CSS => 更高的可扩展性。
好了，就到这里吧，各位。保持冷静。❤️
这篇文章最初发表于The Bubblin Blog
文章来源：https://dev.to/marvindanig/take-your-web-development-skills-a-notch-higher-2cge