适配iphoneX底部的小黑条

从苹果手机的iphoneX及以后，手机的屏幕顶部就出现了“齐刘海”和底部小黑横条的样式。不少app直接兼容了里面的webview的样式，屏幕在竖屏下顶部往往是导航栏，不会遮住webview里面的内容，而底部则从app层面设置了底部高度，使webview底部不在黑色横条区域内，这样就不会阻碍展示webview里面的内容。

但是，每个app千差万别，里面的webview也就展现不一，如果没有app底部高度，那么webview里面的底部内容就会被小黑条遮挡。从网页样式兼容性来说，需要兼容iphoneX后特有的“齐刘海”和底部小黑横条样式，又不影响以前机型的样式。

首先了解一下iphoneX的安全区域，下图蓝色部分为安全区域，而两边的margin、顶部齐刘海和底部小黑条区域都属于不安全区域，属于内容有可能会被遮挡的区域，那么我们需要控制我们的内容在安全区域内。

所幸，在iphoneX出来的时候，官方的ios11系统也提供了WebKit Api去兼容这种样式差异。

viewport-fit有auto，contain，fit三个属性值，默认是auto。

contain: 可视窗口完全包含网页内容， 页面内容显示在safe area内

cover：网页内容完全覆盖可视窗口，页面内容充满屏幕

auto：默认值，跟 contain 表现一致

默认情况下，safari展示的是viewport-fit=contain的情况，如下图，在横屏下，webview里的页面内容在安全区域内，但是从样式上看，这不太美观，并且没有利用好iphoneX赋予的全屏特性。

设置 viewport-fit=cover 后，如下图，内容全屏展示，但是左边的内容被“齐刘海”挡住了。

为了解决这个问题，ios11中的WebKit包括了一个新的CSS函数env()，以及四个预定义的环境变量 safe-area-inset-left 、 safe-area-inset-right 、 safe-area-inset-top 和 safe-area-inset-bottom 。这四个环境变量代表了距离安全区域的距离。

这样，当出现不在安全区域时，env(safe-area-inset-left)不等于0，那么就会导致在padding-left上设置了一个安全距离，从而使内容不被遮挡。

上面是被“齐刘海”挡住的情况，实际比较多的情况用在底部小黑条挡住悬浮bar的情况，加上属性支持判断 @supports ，只有 env(safe-area-inset-bottom) 被浏览器支持的时候才会执行里面的css。

注：微信内的webview是默认viewport-fit=cover的状态的，只需要设置安全距离即可，微信小程序同样适用上述方案。

iphonex以上手机非矩形界面适配前：

适配后，iphonex以上手机非矩形界面自动适配底部高度：

手机在更新换代，随着手机样式发生改变，样式兼容问题也接踵而至，但是问题的制造者往往也是问题的解决者，开发者也不用焦虑找不到解决方案，从而使我们更专注业务逻辑本身。

今天凌晨，iPhone8系列在一年一度的科技圈春晚9月苹果发布会强势推出，随之而来的还有为了纪念苹果十周年的特别款iPhoneX。苹果如今的iPhone用户非常庞大，一年如果只更新一款产品，可能无法满足众多用户的不同需求，今年三款新机齐发，这也是苹果发布会上史上第一次。

iPhone8更值得买的4个理由 看完瞬间不想买X了

那么很多朋友就会问了，iPhone8和iPhoneX到底谁更值得买呢？的确，作为十周年的iPhone，iPhoneX的确很值得关注，但是我认为，我们也应该宠幸宠幸一下与iPhoneX同时间发布的iPhone8和iPhone8 Plus，如果不是因为今年是苹果十周年，今年真正的主角将会是这两款手机。而且从购买角度上来说，iPhone8和iPhone8 Plus相比起iPhoneX更值得购买，下面我们就来分析一下具体原因。

回归初心的设计 VS 不伦不类的设计

这是一个看脸的时代，对于那些非常在意手机颜值的用户，他们非常看重“眼缘”，哪款iPhone让他们觉得看起来顺眼了，那他们就会入手那一款iPhone。而从今天凌晨发布的3款iPhone来看，iPhoneX和iPhone8、iPhone8 Plus的在外形设计上区别非常明显。

iPhoneX上顶部的“刘海”设计（来自The Verge）

和此前曝光的一样，iPhoneX用上了全面屏设计，在“全面屏”当道的时代苹果顺应时代也是正常的。不过，iPhoneX机身顶部果然留着“空气刘海”，两个兔耳朵实在是让强迫症大跌眼睛，尤其让处女座无法接受。而机身正面那颗Home键也消失了，这让iPhoneX看起来和安卓手机一样，辨识度降低了很多。

iPhone 8采用双玻璃机身（来自苹果官网）

对于这种设计无法接受的朋友那你可以考虑升级iPhone8了，因为该系列依然延续了上一代的大部分设计，虽然在长度、宽度和厚度上，iPhone8系列相比iPhone7都有所增加，但是对用户的持握感不会造成任何影响，而且手机的整体设计依然会是你非常熟悉的那个样子，包括宽额头、宽下巴，左右两侧也会有一定的边框。

iPhone8系列上最明显的改变就是背壳再次回归玻璃面板，这也是被很多人看做是一种致敬iPhone4系列的经典设计。而从iPhoneX的真机图看来，无论是正面还是背面都被吐槽为“最不伦不类的一代”的iPhone，iPhone8的设计或者才是更加稳固的选择。

iPhoneX背后的摄像头采用上下垂直分布的设计（来自The Verge）

摄像头的设计也会成为你选择iPhone8系列的原因之一，因为在iPhoneX上，苹果将机身背后两颗摄像头，采用了上下垂直的设计，而iPhone8系列则依然采用了左右横向的设计，也因此被网友戏说为“横8竖X”，所以如果你很纠结后置双摄的排列方式的话，购买时也请好好思量。

A11加持性能平起平坐

一直以来苹果公司总是在首发正式版的机型上使用新的设计，而在次年的S升级版中加强配置及科技含量。虽然今年并没有推出iPhone7s，但是iPhone8可以看做是iPhone7的升级版，故在iPhone8系列上，我们依然看到了苹果对于升级版产品的一些明显升级，比如无线充电模块、True Tone显示技术，但是最让游戏玩家兴奋的无疑是iPhone8和iPhone8 Plus同样提供了和iPhoneX一样的苹果A11处理器，面对这一升级，可以说是是“硬件控”的一大福音。

iPhone 8系列搭载新一代A11处理器（来自The Verge）

iPhone8在硬件方面上的升级无疑会让这款产品更具有竞争力，尤其在手游时代用户更加注重手机性能，苹果A11处理器可以为手机带来出色的性能。无论你是iPhone6s的用户还是iPhone7的用户，面对这样的升级，都会有换机想法。相比起iPhoneX来说，虽然也采用了苹果A11处理器，但是价格却没有iPhone8系列更有优势。

机身尺寸的大小也是让用户选择iPhone8系列的原因之一。

今年无论是在iPhone8系列上还是在iPhoneX上苹果均采用了玻璃机身，在手感上会有很大的不同，但是我们知道手机的尺寸和重量上的差别也会对用户使用设备时候的舒适度产生影响。下面不妨让我们来对比一下iPhone8、8 Plus和iPhoneX的机身尺寸及重量，看看你更喜欢哪个尺寸

当然可以。推荐小米蓝牙耳机又便宜又实用。

优点：

买的是红色的，听起来心有点化掉的感觉，中高音还可以，解析度还不错，可折叠，重量低，便携性高，性价比高。

缺点：

不带的时候漏音比较严重，线有点短，戴着听舒服的，不过戴时间长了还是有点夹耳朵，高音还是缺了点，声场还是差了一些。

总结值得购买。

以上就是关于适配iphoneX底部的小黑条全部的内容，包括:适配iphoneX底部的小黑条、iPhone8，8Plus和iPhoneX哪个更值得买、iphonex可以配无线耳机吗等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！