我不知道有多少Ki-Friends买了iPhone-x。对我来说，如果你真的花了将近10000元买了一部手机，我觉得没有必要。此外，对于我们班来说，购买这种手机的功能是接近1万元。嗯，只是为了炫耀吗？没必要。在iPhone的配置中，有很多东西我们不能使用。无论从价格还是成本来看，我认为你确实需要使用iPhone。购买7是最划算的。如上所述，它只代表个人观点。
从上面的图片中可以看出，这款手机仍然很漂亮，但是你知道如何将iPhone-x与前端网页相适应吗？让我们分享今天。
PhoneX取消了物理按钮，改为底部的一个小黑条。这一变化导致了网页上的屏幕调整问题。对于网页，顶部的自适应问题浏览器（刘海部分）已经被处理，所以我们只需要关注底部和小黑条的自适应问题（即常见的吸底导航、返回顶部和其他相对底部固定的定位元素）。
作者通过查阅一些官方文件，结合一些实际项目的处理经验，整理出一套简单的适应方案，与大家分享，希望对大家有所帮助。以下是处理前后的结果：
在适应之前需要了解的几个新知识
安全区域
安全区是指不受角落、传感器外壳和家庭指示器影响的可视窗口区域。蓝色区域如下所示。
也就是说，如果我们想要很好地适应，我们必须确保页面的视觉和操作区域在安全区域内。
参考文件：人机界面指南-iPhoneX（https://developer.apple.com/ios/.-interface-./overview/iphone-x/）
Viewport拟合
利用iOS 11的新特性，为了适应iPhone X上现有视口元标记的扩展，苹果可以设置三个值以在可视窗口中设置网页的布局：
Contain：可视窗口包含页面的所有内容（左）
封面：页面内容完全覆盖了可视窗口（右）
Auto：默认值，与
小编建议加入这个群体：九六零+五零八+九二零群体中有数百人！你遇到的每个问题都会被交换！并且免费共享零基本介绍信息网页前端开发html，CSS介绍基本信息集！这是一个学习和交流的好地方！还有一些程序员急于回答各种各样的问题！很快就满了。如果你想继续，那就继续！各种各样的PDF等待您下载！都是免费的！所以小编在组里等着你们一起来交流学习。
注意：不添加扩展名的页面的默认性能是viewport-.=.。为了适应iPhone X，您必须设置viewport-.=.，这是适应的关键步骤。
有关详细信息，请参阅文档：viewport-.-descriptor
常量函数
iOS 11的新特性是Webkit的CSS功能，用于设置安全区域和边界之间的距离。有四个预定义的变量：
安全区域插入左边：安全区域与左边界之间的距离
安全区域插入右边：安全区域与右边界之间的距离
安全区域插入顶部：安全区域与顶部边界之间的距离
安全区域插入底部：安全区域与底部边界之间的距离
这里我们只需要关注安全区域插入底部变量，因为它对应于小黑条的高度（水平和垂直屏幕值不同）。
注意：当viewport-.=contain时，常量函数不起作用，必须与viewport-.=cover一起使用。对于不支持常数的浏览器，浏览器将忽略它。
官方文件提到env函数将取代常量函数。作者已经测试过，它暂时不可用。
有关详细信息，请参阅文档：为iPhone X设计网站
如何配合
了解以上几点知识，那么我们适应这个思路就很清楚了。
步骤1：在可视窗口中设置网页的布局
添加viweport-fit属性使得页面的内容完全覆盖整个窗口：
<meta name="viewport" content="width=device-width, viewport-fit=cover">
如前所述，只有设置了viewport-.=.，才能使用常数函数。
步骤2：将页面的主要内容限制为安全区域
根据实际页面场景选择此步骤。如果未设置此值，则小黑条可能遮挡页面的底部内容。
body { padding-bottom: constant(safe-area-inset-bottom);}
步骤3：调整固定元素
类型1：固定完全底部吸收元件（.=0），例如以下两种情况：
可以通过添加内边缘填充物来扩展高度：
{ padding-bottom: constant(safe-area-inset-bottom);}
或者通过计算覆盖原始高度的函数Calc：
{ height: calc(60px(假设值) + constant(safe-area-inset-bottom));}
注意，此方案要求底部条带为背景色，因为背景的扩展部分跟随外部容器，否则会出现中空。
另一种选择是添加新元素（空色块，主要用于小黑条高度占用），然后吸下元素不能改变高度只需要调整位置，如下所示：
{ margin-bottom: constant(safe-area-inset-bottom);}
空色块：
{ position: fixed; bottom: 0; width: 100%; height: constant(safe-area-inset-bottom); background-color: #fff;}
类型2：固定底部0元素，如“回到顶部”和“侧边广告”等。
像这样，位置需要向上调整，只能靠边际来处理。
{ margin-bottom: constant(safe-area-inset-bottom);}
或者，可以通过计算函数calc来覆盖原始底部值：
{ bottom: calc(50px(假设值) + constant(safe-area-inset-bottom));}
别忘了使用@.
到目前为止，我们已经了解了两种常见的固定元素适配方案，但是别忘了，一般来说，我们只想向iPhone X添加新的适配样式，可以使用@support样式编写它：Fixed Element Adaptation、Fixed Element Adaptation、Fixed Element Adaptation、Fixed Element Adaptation、Fixed Element Adaptation、Fixed Element Adaptation、Fixed Element Adaptation、Fixed Element Adaptation固定元素
@supports (bottom: constant(safe-area-inset-bottom)) { div { margin-bottom: constant(safe-area-inset-bottom); }}
写在最后
以上方案仅供参考。作者认为，这一阶段的改编虽然有些曲折，但至少是可以解决的。具体而言，根据页面的实际场景，我们需要在不影响用户体验和操作的前提下不断尝试和探索，以实现更完美的适应。
以上就是今天的分享。如果你对此一无所知，你可以在后台给我留言。稍后，我会在今天的头条新闻里做一个适合iPhone-x的视频录制和分享，从头开始分享结尾，解释细节，这样你就可以更完整地理解它。对于许多前端零基础的学生来说，今天分享的内容可能很难消化，但是还没有。关系，就这么办。稍后，我将一个接一个地更新基金会。谢谢你的关注。
网友评论