顶部有白边_【iPhoneX适配】干掉应用在Safari中显示的白边

- 期待你的关注和收藏 -

耳朵们要好好收藏

原文&＃xff1a;Stephen Radford | 译&＃xff1a;程琳琳

新的iPhone X具有美观的全屏显示。但是&＃xff0c;在浏览器的顶端有一个小小的缺口&＃xff0c;在默认情况下&＃xff0c;横屏查看网站时&＃xff0c;会出现横屏显示问题。

为了适应iOS 11顶部缺口&＃xff0c;默认会将网站限制在屏幕上的“安全区域”内。使得浏览大多数网站时&＃xff0c;出现左右侧出现白边。

庆幸的是有两个简单的解决思路。

一、背景色(background-color)

如果您的网站使用单一纯色作为背景&＃xff0c;那么最适合您的解决方案就是用background-color在您的body代码上设置属性。上面的网站案例&＃xff0c;就会得出以下结果&＃xff1a;

正如上图所示&＃xff1a;边距保持不变&＃xff0c;只填充背景颜色

viewport-fit

如果您更喜欢对设计进行额外的控制&＃xff0c;或者使用渐变或图像作为背景&＃xff0c;则只设置一个 background-color可能还不可行。在最新版本的iOS中&＃xff0c;Apple已经在CSS Round Display Spec中添加了viewport-fit的描述符。

只需添加viewport-fit&＃61;cover到您的meta标记&＃xff0c;即可将您的网站扩大到填补整个屏幕&＃xff0c;而不仅仅是安全区域。

这样使得上面的网站案例&＃xff0c;得出以下结果&＃xff1a;

显然&＃xff0c;现在需要开发人员/设计师手动调整来适应屏幕的缺口。

safe-area-inset-*

为了处理可能需要的任何调整&＃xff0c;iOS 11的Safari版本包含一些可以在使用时viewport-fit&＃61;cover使用的常量。

• safe-area-inset-top
• safe-area-inset-right
• safe-area-inset-left
• safe-area-inset-bottom

这可以被添加到margin&＃xff0c;padding或诸如top、left一样的绝对位置值。我将以下内容添加到网站的主要容器中。

这完美解决了页面上菜单和社交媒体图标位置问题。

喜欢请点赞 分享朋友圈也是一种赞赏