iPhone X适配

最新推荐文章于 2024-04-24 10:13:58 发布

WickedDogg

最新推荐文章于 2024-04-24 10:13:58 发布

阅读量1.3k

点赞数

分类专栏：适配 css iOS viewport 文章标签：适配前端 iPhone X

本文链接：https://blog.csdn.net/WickedDogg/article/details/79205050

版权

1 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

在机器上识别iPhone X可以通过以下的两种简单方式实现

var isIphoneX = window.screen.width === 375 && window.screen.height === 812

var { width, height } = window.screen
var ratio = window.devicePixelRatio
var isIphoneX = width * ratio === 1125 && height * ratio === 2436

以上两种方法并没有本质上的区别，当然还有很多种其它方法可以识别iPhone X机型，比如UA

// iPhone X的UA
Mozilla/5.0 (iPhone; CPU iPhone OS 11_2_1 like Mac OS X）AppleWebKit/604.4.7 (KHTML, like Gecko) Mobile/15C153

这里就不一一列举了

适配情况主要分为以下几种

其实这种情况的话并不需要我们做太多工作，safari在顶部已经帮我们做好了，如果是微信、QQ等这些内置的浏览器，应用本身也已经帮我们做好了适配工作，这种情况我们不再多讲

这种是需要重点关注的适配情况，因为手机端safari有个很复杂的情况，上滑之后底部safari自带的导航栏会消失，而网页内容会延伸到屏幕底部，这样我们本身的导航栏会被下方的白线挡到，如下图所示

这里写图片描述

这种适配主要是通过iOS 11的系统支持的meta属性和css计算属性来实现。

iOS 11中在viewport的meta标签中添加了一个viewport=cover，其实这个属性以前就存在，取值默认为auto，也就是contain，contain和cover的区别在于下图

这里写图片描述

如果将viewport设置成cover，那么网页内容会占满整个屏幕

<meta name="viewport" content="width=device-width, minimum-scale=1, user-scalable=0, viewport-fit=cover">

这样网页内容是占满整个屏幕了，但是还有一个问题没有解决，底部导航栏如何不被导航条遮挡。这个时候就需要另外一个计算属性constant/env来解决了

iPhone X上提供了一个变量叫做safe-area-inset-*（*为top、bottom、left、right之一），这个属性可以描述网页内容距离安全区边缘的距离，如下图所示

这里写图片描述

在底部固定的tab中，只需要将这个tab容器的padding-bottom设置为safe-area-inset-bottom即可（别忘了考虑tab容器的盒子模型和高度）

// 以下两个属性位置不可以变，向后兼容
.tab-container{
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

这样如果在移动端Safari中向上滑动的时候tab容器的高度会被safe-area-inset-bottom撑高，从而解决适配问题，就像下图这样

这里写图片描述

当然这个解决办法并不唯一，比如还可以通过设置一个单独的盒子，通过将其高度设置为safe-area-inset-bottom，这样也可以解决

其实网页端iPhone X的适配工作并不繁杂，系统本身已经给我们提供了很好的解决方案。

如果大家有更好的想法，欢迎在评论区分享。

关注