详解关于移动端兼容iPhoneX底部小黑条

最新推荐文章于 2023-03-10 21:13:45 发布
最新推荐文章于 2023-03-10 21:13:45 发布
阅读量1.7k 收藏 3
点赞数 1
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43989257/article/details/107304018
版权

场景

由于iPhoneX去掉了物理按键，改为了底部小黑条，这就会导致屏幕适配问题，最常见的场景就是底部fixed的元素被阻挡的情况。对于这种问题，我们一般采取css或js的处理方式（适用于h5，小程序）。

css适配方案（推荐）

第一步：设置网页的头部标签

<meta name="viewport" content="width=device-width, viewport-fit=cover">

viewport-fit

最低0.47元/天 解锁文章
1oTa_Ry
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
heyzqt
03-29 5629
最近写小程序时，遇到了 iPhoneX 底部小黑线与内容重叠的问题，实际上是iPhoneX安全区域的适配问题，了解清楚这个问题花了挺多时间的，也实操出了结果，忍不住来总结总结。 本文目录 前言        · 内容与小黑线重叠情况说明 1.安全区域含义 2.微信小程序适配iPhoneX底部小黑条(Home Indicator)     ...
1.21 iphonex的底部样式兼容
web
01-21 662
iphonex的底部样式兼容 形成一个安全区域，解决iphonex兼容性问题 .bottom-wrapper { margin-top: 24rpx; height: calc(112rpx + env(safe-area-inset-bottom)); .bottom { background-color: white; position: fixed; left: 0; right: 0; bottom: 0; padding-bottom
小程序 苹果 X,XR等机型 小黑条适配
qq_23943923的博客
09-13 404
问题：小程序底部的自定义tabBar，是用的小程序官方custom-tab-bar 组件。xr等机型下，因为有小黑条，去预约区域会被遮挡住。在其他机型下是可以正常显示的。 xr机型下： 其他机型下： 解决方法：使用微信官方API，getSystemInfo()中的safeArea对象进行适配 safeArea参数详情： 1.通过getSystemInfo方法获取到screenHeight和safeArea.bottom 参数，然后两数相减，即获取底部多出的高度。 wx.getS...
【改机教程】iOS系统去除小黑条，改拍照声、拨号音、键盘音，不用越狱，支持所有机型
阿轲玩机宝典
03-10 1577
在“SpringBoard”选项点击启用，然后点击底部的“应用”按钮，弹窗点击“ReStar”自动注销重启（这部分修改不需要手动重启）今天带来最新的教程，这次修改利用的是同一个漏洞，由外网大神 @tamago 开发，国内大神@冷风 进行汉化和优化。这个工具还内置了其它有趣的功能，我就不举例了，大家自行把玩，欢迎在评论区交流你的修改效果。可能出现的问题包括：卡顿、闪退等，大家自测（反正重启就恢复了，所以不算什么大事）获取修改工具，把App的安装地址复制，在Safari浏览器打开安装，如下图。
解决兼容苹果手机底部黑线的问题
DLY_66L14的博客
08-06 709
解决兼容苹果手机底部黑线的问题。
详解iOS11、iPhone X、Xcode9 适配指南
08-29
主要介绍了详解iOS11、iPhone X、Xcode9 适配指南，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
iOS 11 safeArea详解及iphoneX 适配
01-05
现在对于iPhone X的适配，有一种常见的做法是给导航栏或tabbar增加一个固定的距离，比如顶部增加44pt，底部增加34pt。这种写死距离的做法乍看上去挺简单，其实并不好，理由如下 不适合多机型的适配，如果以后出了一...
iPhone X官方文档的适配学习详解
08-29
本篇文章主要介绍了iPhone X官方文档的适配学习详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
【移动端兼容问题研究】javascript事件机制详解(涉及移动兼容)1
08-08
事件捕获/冒泡网页上的布局很复杂，我们对页面的单一操作有可能产生预计以外的影响：比如我点击一个span，我可能就想点击一个span，试试上他是先点击docume
详解vue移动端日期选择组件
08-28
"详解vue移动端日期选择组件" vue移动端日期选择组件是基于Vue.js框架开发的移动端日期选择器组件。它提供了灵活的日期选择方式，支持多种日期格式，能够满足移动端应用程序的日期选择需求。 组件安装 要使用vue...
Android开发丶一个仿IOS的底部弹窗
02-22
记录了项目中的技术点，这里是根据UI设计而仿照IOS风格的一个底部弹窗，具体应用场景五花八门。
微信小程序 iPhone 11、iPhoneX 底部安全区域（底部小黑条）适配
yangning_的博客
11-17 925
此篇文章足以解决 https://blog.csdn.net/guopeisi/article/details/102561153
移动端解决底部固定按钮遮挡页面内容
铁锤妹妹的博客
05-27 4470
问题描述 首先实现按钮固定在页面底部，需要设置按钮的position为fixed 然后页面一些内容被底部固定的按钮遮挡住了，导致显示不全 方法1 在页面内容最下面写一个透明div，设置这个透明div的宽和高； width: 100%; height: 60px; 方法2 在vue单页面最外面div加 padding-bottom：60px； 最终效果完美实现 ...
用于在处理存在底部导航栏的设备上存在导航栏遮挡html页面的问题
myhong的博客
03-20 861
/** * 此处用于在处理存在底部导航栏的设备上存在导航栏遮挡html页面的问题 *option :view 满屏的视图 */ private void setWebContainerLayoutParams(View view) { ViewGroup.LayoutParams layoutParams = view.getLayoutParams(); ViewGrou...
全屏背景图移动端滚动时白底问题
秋实的博客
03-21 1882
最近响应式项目移动端遇到一个问题，页面使用的全屏的背景图片，但当它到了移动端需要滚动的时候，往下面一滚动，第二屏等会出现白底，后来让全屏背景图片固定了，再怎么滚动都不影响，解决掉了该尴尬问题。 body和html高度都设置了100%，滚动出现了白底问题增加 background-attachment:fixed; 后完美解决。 background-attachment详解： ...
解决屏幕大小不一导致页面下方出现多余空白的问题
EvelynHouseba的专栏
06-13 1724
一、问题描述： 左图：iphone5的屏幕大小，页面高度正常显示 右图：iphoneX的屏幕大小，由于设置了固定高度，导致在大屏幕下出现多余空白 二、解决方案：底部(按键)保持固定高度，顶部(输入结果部分)根据屏幕高度计算剩余高度 Page({ data:{ ......... windowHeight: 0, screenHeight: 0, layoutBottomHeight: 0 }, onLoad:function(options){ .
mui自适应iphonX 底部小黑条（留出底部安全区域）
qq_39757382的博客
01-16 1808
在plus节点下面添加： "safearea" : {             "background" : "#f7f7f7", // 安全区域外的背景颜色，默认值为"#FFFFFF"             "bottom" : {                 // 底部安全区域配置                 "offset" : "auto"      
iPhonex系列手机底部适配
Luckyzhoufangbing的博客
06-01 1005
iPhoneX、iPhone11、iphoneXR 等全屏手机，由于下方有一个小长条，到底吸底按钮等元素被下方小长条遮住，需向上移动一点，将小长条留出距离， 适配方法如下： js: let deviceHeight = window.screen.height let deviceWidth = window.screen.width let DPR = window.devicePixelRatio let condition1 = (deviceWidth ===
vue x 兼容iphone_详解关于移动端兼容iPhoneX底部小黑条
weixin_39953356的博客
12-20 868
场景由于iPhoneX去掉了物理按键，改为了底部小黑条，这就会导致屏幕适配问题，最常见的场景就是底部fixed的元素被阻挡的情况。对于这种问题，我们一般采取css或js的处理方式(适用于h5，小程序)。css适配方案(推荐)第一步：设置网页的头部标签viewport-fit：IOS11新增的特性，是为了iPhoneX而对meta标签做出的一个拓展属性。目前有三个值：contain 可视窗口完全包含...
vue移动端怎么设置页面高度_vue移动端屏幕适配详解
最新发布
06-06
对于移动端页面，我们通常使用vw（视窗宽度）和vh（视窗高度）来设置元素的尺寸，以适配不同的屏幕大小。同时，我们也需要设置页面的高度，以保证页面内容完整显示，并且在滚动时能够正常展示。 下面是一些设置页面...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值