兼容inphoneX底部刘海，苹果手机刘海遮挡底部问题

桃扇骨 2022-10-16 06:12 211阅读 0赞

有时候，我们在使用苹果手机的时候新版手机底部都有一个横线的刘海，当按钮定位到底部的时候，往往会因为新版手机的刘海被遮挡，如图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTc0NjQz_size_16_color_FFFFFF_t_70]  
这时候给底部按钮的父元素加上如下代码

padding-bottom: constant(safe-area-inset-bottom); // 兼容 IOS<11.2/
       padding-bottom: env(safe-area-inset-bottom); // 兼容 IOS>11.2/

使用之后  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTc0NjQz_size_16_color_FFFFFF_t_70 1]

还可以用来兼容被底部遮挡的内容部分，根据手机型号的不同显示不同高度

padding-bottom: 200px;
    	padding-bottom: calc(200px + env(safe-area-inset-bottom));// 兼容 IOS<11.2/
    	padding-bottom: calc(200px +20px+ constant(safe-area-inset-bottom));// 兼容 IOS>11.2/

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTc0NjQz_size_16_color_FFFFFF_t_70]: /images/20221014/ec2b64450b6a489d8fa4fb79cac5773d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMTc0NjQz_size_16_color_FFFFFF_t_70 1]: /images/20221014/0fa960e92702464f94635a8e093f6089.png

发表评论取消回复

表情：

评论列表（有 0 条评论，211人围观）

还没有评论，来说两句吧...

相关阅读

相关如何兼容苹果手机inphoneX（底部横杠）

//html中添加 <meta name="viewport" content="width=device-width,height=device-height

野性酷女/ 2023年01月17日 02:26/ 0 赞/ 190 阅读

相关 iOS 2020iPhoneX、iPhone12刘海适配，底部安全区域高度

废话不多说直接上代码：方法一： //判断是否为iPhone X define IPHONE_X \ ({BOOL isPhoneX = NO;\

女爷i/ 2022年12月23日 12:26/ 0 赞/ 261 阅读

相关适应刘海屏

///适应刘海屏变量 phoneHeight: getApp().globalData.phoneHeight, 样式 :s

蔚落/ 2022年12月20日 03:26/ 0 赞/ 160 阅读

相关 iOS - iPhone手机刘海屏判断

前言最近写毕业设计的时候，发现 iPhoneX 之后的刘海屏手机顶部状态栏高度和底部TabBar高度和原来不一样了，这就需要我们对刘海屏手机做单独的 UI 布局适配了。

ゞ浴缸里的玫瑰/ 2022年10月25日 12:47/ 0 赞/ 650 阅读

相关兼容inphoneX底部刘海，苹果手机刘海遮挡底部问题

有时候，我们在使用苹果手机的时候新版手机底部都有一个横线的刘海，当按钮定位到底部的时候，往往会因为新版手机的刘海被遮挡，如图 ![在这里插入图片描述][watermark_

桃扇骨/ 2022年10月16日 06:12/ 0 赞/ 212 阅读

相关 css适配刘海屏手机

![20210702102618482.png][] 刘海屏的手机会出现的问题。底部的内容太靠底部边了有的可能还会被截断。底部是固定的fixed定位bottom：0 我

以你之姓@/ 2022年10月12日 01:07/ 0 赞/ 224 阅读

相关 H5网页去除苹果手机底部白边

先看去除前后的效果对比 ![20210803145522724.png][] 在网页的head里面放以下代码 <meta name="viewport" c

喜欢ヅ旅行/ 2022年09月02日 12:53/ 0 赞/ 312 阅读

相关小程序底部按钮兼容 iPhone X（解决底部横杠遮挡问题）

解决方式：底部增加 34px 的高度，使元素不被横杠遮挡。效果图： <table> <tbody> <tr> <td style="width:42

水深无声/ 2021年12月18日 22:23/ 0 赞/ 609 阅读

相关 h5 底部按钮兼容 iPhone X（解决底部横杠遮挡问题）

iOS特性方法（推荐），小程序也可用 padding-bottom: constant(safe-area-inset-bottom); /兼容 IOS<11.2

ゝ一世哀愁。/ 2021年12月11日 11:17/ 0 赞/ 735 阅读

相关 apicloud api.safeArea（解决状态栏沉浸式、刘海屏、iPhoneX 底部Home键）

> api.safeArea，页面不被其它内容（如状态栏）遮住的区域 > > 通过safeArea能够知道当前页面哪些地方被遮住，从而做出相应的调整，保证页面重要元素不被遮挡

今天药忘吃喽~/ 2021年12月10日 02:21/ 0 赞/ 412 阅读