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

最新推荐文章于 2023-02-15 11:20:24 发布
最新推荐文章于 2023-02-15 11:20:24 发布
阅读量748 收藏
点赞数
分类专栏： 前端小问题 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43174643/article/details/117325791
版权

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

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

使用之后
在这里插入图片描述

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

	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/
我的ID是小白
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Linksys PAP2T Phone Adapter
06-29
Linksys PAP2T的优势在于其便捷性和兼容性。它可以直接插入家庭路由器或网关，无需专业知识即可进行基本设置。而且，由于每个电话端口可以独立工作，你可以在同一时间拥有两个电话号码，如同拥有两条电话线，这对于...
Back-End-Recruiting-Test
03-27
Inphonex API 负责应用Inphonex项目的智能和业务规则的API。安装克隆执行以下命令以获取项目的最新版本： $ git clone --recursive git@github.com:phelipemomesso/Back-End-Recruiting-Test.git inphonex设定权限...
iOS判断是否为刘海屏
MOON_YZM的博客
07-23 906
#define MN_INTERFACE_IS_PHONE ([[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPhone) //是否刘海屏 - (BOOL)isIPhoneNotchScreen{ if (!MN_INTERFACE_IS_PHONE) { return NO; } BOOL result = NO; if (@available(iOS 11.0, *
兼容IphoneXR、IphoneX、Iphone10+、Android刘海屏
最新发布
523varaChen
02-15 286
移动端，前端全屏展示刘海屏空隙问题，不能全部占满，出现横线杠杠等
h5兼容iPhoneX底部刘海屏
青春正在燃烧的博客
06-28 819
1.当把按钮使用绝对定位到屏幕底部的时候，iPhonex底部刘海屏会遮挡底部按钮，这时候只需加一句代码就可解决问题； .iPhonex-style{ bottom:evn(safe-area-inset-buttom); }
iPhone的刘海屏和home键解决方案
weixin_44329113的博客
04-16 732
iPhone开发常见问题及解决方法问题1.APP放大缩小解决方法：我们可以根据需求引入上面的代码。2.刘海屏问题注意3.iPhone 11后底部home遮挡问题方法一：方法二：方法三： 问题 在开发APP的过程中，我们会遇到不同设备展示出来的各种问题，下面是作者遇到的问题： 1.APP放大缩小 问题描述：双指操作时可以将app像浏览器一样放大缩小 请看代码 <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maxim
iphonex 底部遮挡返回键 解决方法
zhuomox的博客
12-18 6594
只解决底部  positio:fixed   遮挡返回键  iphonex问题  前端开发 iphonex 判断条件 @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-radio: 3) { 写css样式即可解决 } 以下仅供参考：    网
RingByName Click2Call-crx插件
03-22
RingByName Click2Call 特征： ... - 只需在Click2Call下拉菜单中输入任意数字即可发起呼叫。...由InPhonex系统和开发部门开发，特别感谢Marcel Araujo和Lucas Rosa。 支持语言:English,español,português (Brasil)
【uni-app】解决iPhone X “刘海屏”兼容性问题
loyd3的博客
11-11 1685
这里可以使用uni.getSystemInfoSync()的mode属性获取手机型号，判断是否在iPhone X中运行，如果是，则重新设定padding-top的值即可。开发微信小程序时设置为自定义导航，在iPhone X这种有刘海屏的手机中预览会发现自定义导航与“刘海”之间的距离对比原生导航有些差异，用户体验不是很好。
解决ios软键盘弹起遮盖住底部输入框的问题（终极解决方案！！！绝对好用）
細水、長流√的专栏
10-17 6264
html &lt;div class="layout_flex"&gt;         &lt;!-- 头部 --&gt;         &lt;div class="header"&gt;header&lt;/div&gt;         &lt;!-- 中间内容区域 --&gt;         &lt;div class="content" id=
两步实现h5在ios刘海屏的样式兼容
01-03
h5在ios刘海屏的样式兼容 未修改之前的页面： 一、html页面头部添加viewport-fit=cover 加viewport-fit=cover之后： 二、css设置上下间距 /* 首页-头部刘海屏兼容设置 */ .indexPage{ padding-top: .24rem; padding-top: calc(~'constant(safe-area-inset-top) + .24rem'); padding-top: calc(~'env(safe-area-inset-top) + .24rem'); } /* 底部菜单栏-底部间距设置 */ .menuBa
iphone刘海屏页面适配方法
11-29
1. 下面是实现iphonex 刘海屏前端页面适配的一个插值算法小案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body, ul { margin: 0; } ul { padding-left: 10px; } li { list-style: none; } .phone { position: relative; w
IOS菜鸟初学第六篇：WKWebView显示的页面下移，底部遮挡问题
专注分享个人所得，希望给大家带来帮助
05-10 3921
问题描述及问题结果： 今天遇到一个基于wkwebview 的跳转的问题，就是在隐藏了导航栏的页面，跳转到有导航栏的页面的时候，出现下图的问题： 而正确的显示应该是下面的： 由于我在其他页面打开是没问题的，反而在我一个特定页面打开之后出现这个问题，...
关于h5页面苹果手机使用fixed定位tabbar最底部时遮挡内容问题
qq_40011214的博客
07-12 5028
在使用uni-app时，自己写了个底部tabbar导航栏，出现了tabbar遮挡内容的问题，如下图所示； 刚开始的时候，使用了顶部盒子padding-bottom 来时底部盒子撑开，但是在chrome浏览器中查看，效果无误 但是呢！！！ 当任务数据一旦多了之后，还是会有遮挡问题，并且遮挡问题在ios也就是苹果手机上的浏览器中打开没有实现想要的效果； 百度多次查询文档，并没有发现可行的办法，最后是在微信的技术群里提出的问题，还好啊，三个技术群就一个正八经的能给你解答问题的，剩下的都是叫你去百.
【ios开发】页面内容被导航栏遮盖
夕降巫咸的博客
10-13 1294
最近在适配ios15 时发现，之前正常显示的页面在更新之后都被导航栏盖住了，或者说页面内容延伸了。网上也查了很多，找到一个有用的解决方案。 把edgesForExtendedLayout值设为UIRectEdgeNone, 也就是不让view延伸到整个屏幕 self.edgesForExtendedLayout = UIRectEdgeNone; 为此我又查了一下，发现 从iOS7开始，view controllers默认使用全屏布局...
ios兼容iphonex刘海屏解决方案
热门推荐
奥特曼超人的博客专栏
06-14 3万+
如何兼容android、ios的刘海屏 描述 刘海屏也有其它叫法：凹凸屏、头凹屏、覆盖屏、挖孔屏等等，这里统一按刘海屏命名，虽然都在吐槽IPhoneX的刘海屏，但是各大安卓厂商还是不停的争相模仿，使用起来也是挺不方便的，颜值上升，操作感下降，尤其是单手握住屏幕的边缘时会有极大的不便。 首先借鉴下网络的手机图片展示下，苹果IOS的还好，但是安卓的厂商有小米、华为、oppo、vivo等都相应...
CSS适配刘海屏的几种方式
BY_xueke的个人空间
06-08 4849
前言 前些年的iphone X一出现 手机厂商纷纷取消了实体的物理按键，ios取而代之的是底部的一个大横条 安卓这边基本上也有不少虚拟按键的厂商 就会导致一些比较奇葩的问题出现 比如 这种的情况的发生，或者说刘海屏，挖孔屏 一般来说这种时候，都需要我们前端去进行设备适配。 适配之前需要了解的几个新知识 安全区域 安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角（corners）、齐刘海（sensor housing）、小黑条（Home Indicator）的影响，以及横屏状态下他们的影响。 更详
iOS导航栏遮挡问题的总结
chokshen的博客
08-27 9606
一.背景：在做开发的时候经常不经意就出现导航栏遮挡主视图的情况，之前出现这种情况我会先看看View UI Hierarchy，然后把视图的坐标手动调整，例如把视图的y坐标写成64（建议封装成宏，因为有刘海的手机状态栏和导航栏的高度之和不是64），即减去状态栏和导航栏的高度之和，这个方法是可行的，但是不适用所有的场景。不同的场景应该采用不同的解决方案，要想找到最合适的解决方案，就必须去研究其中的原理...
小程序刘海屏适配及兼容全面屏底部横条(indicator)
薛定喵君的博客
12-05 3258
小程序适配iPhone刘海屏及indicator的方法 本文适用于未自定义导航&吸底按钮(底部按钮fixed)的情况 # 判断设备 判断方法->wx.getSystemInfo(OBJECT)返回的信息 model是否包含 iPhone X screenHeight是否等于 812 # 代码 主要js代码 //app.js App({ // 全局数据 globalData: ...
"齐刘海儿"挡画面？苹果:开发者你们调整界面适配
互动教程网[www.hdjc8.com]
09-16 2712
（原标题：苹果要求开发者调整界面，适应iPhone X那块形状独特的屏幕）周韶宏iPhone X被库克描述成“未来的手机”，不过对许多应用开发者来说，迎接这个“未来”的第一步是修改应用。为了实现正面的“全面屏”而又不缺失关键组件，iPhone X顶部有一条1/2屏幕宽度的黑色窄条，依次排列着放着：红外摄像头、泛光灯、距离传感器、环境光传感器、听筒、麦克风、正面摄像头和光点投射器。再加上显示区域的圆

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值