解决苹果手机底部黑线影响布局的问题

最新推荐文章于 2023-02-23 17:52:52 发布
最新推荐文章于 2023-02-23 17:52:52 发布
阅读量936 收藏 1
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cb294/article/details/120692962
版权

今天做项目的时候，发现安卓手机和苹果手机有一个差异

苹果手机底部黑线会挡住我页面底部的内容

​​​​​​​ 

解决方法就是给盒子底部加内边距，即padding-bottom: env(safe-area-inset-bottom)

 

env(safe-area-inset-bottom)可以根据苹果手机底部黑线的高度来确定内边距大小，不过要注意env(safe-area-inset-bottom)在安卓手机值为0，不过通过样式的调整是可以解决的。

cb294
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决iPhone部分机型下面有小黑条遮挡问题
li2406608527的博客
07-14 632
解决iPhone小黑条遮挡问题
iOS去掉导航栏底部黑线
iCloudy
04-28 746
[[UINavigationBar appearance] setShadowImage:[[UIImage alloc] init]];[[UINavigationBar appearance] setBackgroundImage:[[UIImage alloc] init] forBarMetrics:UIBarMetricsDefault];
固定底部 布局_你不知道的秘密，苹果移动应用的底部栏原来是这样布局的
weixin_39562998的博客
12-24 761
底部栏(Tab Bar)，也就是我们日常使用的手机应用底部的操作栏常规的移动应用底部栏相信各位UI设计师们都非常熟悉。那么，你知道iPhone上的应用底部栏，开发小哥们是怎么布局的吗？苹果官方提供的底部栏布局其实就一种，那就是固定间隙布局：以一倍图375px为例，最左侧及最右侧距离页面两边是各2px的间隙，中间的各个tab间的间隙是4px的间隙，tab的宽度则是均等分。而所谓的固定间隙，指的就是无...
解决兼容苹果手机底部黑线的问题
DLY_66L14的博客
08-06 709
解决兼容苹果手机底部黑线的问题。
vant的底部菜单被ipone12底部小黑条挡住的解决方案
huangxiaopang2的博客
04-16 1065
vant的底部菜单被ipone12底部小黑条挡住的解决方案 记录下今天在工作中遇到的一个问题。底部菜单被ipone12底部小黑条给挡住了，具体情况如下图所示: 经过一番百度，终于找到了解决方案，在网页的viewport添加viewport-fit=cover <meta name="viewport" content="user-scalable=0,width=device-width,initial-scale=1.0,viewport-fit=cover"> 效果如下图: 就完美解
小程序以及H5页面上IphoneX底部安全区域小黑条适配问题
03-29
在苹果 iPhoneX 、iPhone XR等机型上，物理Home键被取消，改为底部小黑条替代home键功能,从而导致吸底元素会被小黑条遮挡覆盖的问题 解决方案 使用已知底部小黑条高度为34px/68rpx机型适配(不建议) 使用微信官方API...
基于python的小车走黑线
10-11
一个简单的基于python的小车走黑线项目，结合了OpenCV
ZY08-C循迹 寻黑线程序代码
最新发布
12-21
ZY08-C循迹 寻黑线程序代码
xiaoche.rar_黑线寻迹
09-24
使用单片机实现小车智能寻迹，沿黑线行走，使用C语句编程。能够较好的实现实验要求。
详解Vue开发微信H5微信分享签名失败问题解决方案
12-03
关于Vue中路由使用history模式，开发微信H5页面分享时在安卓上签名有效成功，但是在IOS设备上一直报错签名失效问题 问题描述:在Vue开发过程中，路由使用History模式下，在使用微信分享时，在微信开发者工具上一切...
iOS app 界面状态条上方出现 和界面下方出现黑边的解决方案
sun_Winter的专栏
01-14 1180
一、拖进去一张默认的照片 二、看看你的Supporting Files文件的.plist文件下面键值对里面有没有Launch image（如果没有 你就手动的添加进去） 三、然后把后面value的名称改成你添加的那个图片的名称 【注】目前没发现对图片的大小有要求 如果大家有新的发现或见解，我们可以一起学习！
env(safe-area-inset-bottom)解决ios底部小黑线遮挡问题
郊眠寺
01-04 1万+
最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。
uniapp h5 tabBar兼容IOS手机底部黑线
码农键盘上的梦
02-23 2731
因为我这边的tabbar导航栏是自己写的，不是用的uniapp自带的，所以如果遇到IOS手机底部有黑线的这种，需要将tabbar导航栏的高度调整一下才可以。app底部的tabbar 导航栏如果遇到IOS手机则会出现问题。一、pages.json文件中添加tarBar。[补充2：在app中$route找不到的问题]补充1：自定义switchTab跳转方法。uniapp自定义tabBar方案。二、把原生的tabBar隐藏起来。三、自定义一个tabBar组件。
uniapp 兼容IOS手机底部黑线（iphone 10以上均有的黑线）亲测有效
yehaocheng520的博客
11-27 7895
uniapp 兼容IOS手机底部黑线 IOS苹果手机有很多款手机底部都有一条黑线。 app底部的tabbar 导航栏如果遇到IOS手机则会出现问题。 因为我这边的tabbar导航栏是自己写的，不是用的uniapp自带的，所以如果遇到IOS手机底部有黑线的这种，需要将tabbar导航栏的高度调整一下才可以。 除此之外还有些页面，底部有个按钮之类的，也是需要做兼容处理的。如下： 解决办法如下： 三行代码搞定： 第一种办法：通过padding-bottom赋一个安全值 可以通过padding-botto
safe-area-inset-bottom iphone
热门推荐
飞翔的熊blabla
07-10 4万+
屏幕尺寸我们熟知的iPhone系列开发尺寸概要如下：△ iPhone各机型的开发尺寸转化成我们熟知的像素尺寸：△ 每个机型的多维度尺寸倍图其实就是像素尺寸和开发尺寸的倍率关系，但这只是外在的表现。倍图核心的影响因素在于PPI（DPI），了解屏幕密度与各尺寸的关系有助于我们深度理解倍率的概念：《基础知识学起来！为设计师量身打造的DPI指南》iPhone8在本次升级中，屏幕尺寸和分辨率都遗传了iPho...
解决ios小程序，app底部黑线问题
qq_45927571的博客
04-17 1万+
项目场景：ios小程序，app底部黑线问题 提示：这里简述项目相关背景： 例如：项目场景：示例:商场类型小程序有些页面是支付按钮是固定定位在页面底部的， 问题描述 提示：这里描述项目中遇到的问题： 例如：这里ios部分机型的黑线/导航条会处于按钮之中，影响操作 解决方案： 提示：这里填写该问题的具体解决方案： 例如：有三种办法: 1.一棒子打死法，直接给这个页面添加padding 缺陷：安卓机型不需要这个padding导致与页面底部不能紧密贴合，影响操作 调取获取设备信息的接口再进行判断，这用un
关于env(safe-area-inset-bottom)的兼容问题
anwebDesigner的博客
09-21 7232
env(safe-area-inset-bottom)兼容性问题，避坑指南。
iphoneX 适配（底部导航栏被黑线遮挡）
tendernessxy的博客
03-04 747
iphoneX 适配（底部导航栏被黑线遮挡）
uniapp适配iphonex底部黑线
05-01
Uniapp是一种跨平台开发框架，但是在iPhone X上，由于屏幕底部的刘海，导致底部出现了一条黑线。为了适配iPhone X，需要进行以下操作： 1. 在manifest.json文件中，设置“navigationStyle”: "custom"，自定义导航...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值