iphone刘海_底部bar适配

最新推荐文章于 2023-02-08 20:47:03 发布
最新推荐文章于 2023-02-08 20:47:03 发布
阅读量281 收藏
点赞数
分类专栏： javascript 前端 文章标签： html5 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zai329979994639/article/details/127250704
版权

方案1
env() 与 constant() 设置安全区域，是css里IOS11新增的属性，webkit的css函数，用于设定安全区域与边界的距离，IOS11有4个预定义变量：
safe-area-inset-left: 安全区域距离左边界的距离
safe-area-inset-right: 安全区域距离右边界的距离
safe-area-inset-top: 安全区域距离顶部边界的距离
safe-area-inset-bottom: 安全区域距离底部边界的距离
H5网页设置 viewport-fit=cover的时候才会生效，小程序里的viewport-fit默认是 cover

  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);

方案2
首先获取iphone机型，根据机型设置bar高度

多啦-A萌
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
iphoneX Home Bar 类似苹果底部操作条
12-07
想要感受最新iPhone X 或者替代坏掉的 home 键？ 这个应用可以添加类似 iPhone X 的 Home 键到你的屏幕。 这个 Home 键非常简单。只有上划，左划或者右划三个动作来启动所选择的动作。
iphone刘海屏页面适配方法
10-17
主要介绍了iphone刘海屏页面适配方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
iOS 适配刘海屏 刘海 状态栏 底部安全距离
baidu_40537062的博客
03-20 2295
刘海屏出来前 状态栏：20pt 导航栏：44pt 底部安全距离：0pt 刘海屏出来后 状态栏：44pt 导航栏：44pt 底部安全距离：34pt 参考博客： iOS灵活适配刘海屏手机的顶部状态栏高度和底部安全距离 ...
如何适配处理iphoneX底部的横条 - ios
weixin_30906671的博客
03-20 5838
　　iphoneX手机取消了实体Home键，取而代之的是主界面底部不显眼的横条“HomeIndicator”。当网页底部fixed 元素时候，一部分元素可能就被这个横条遮挡住，怎么适配解决呢？ 　　第一步： 　　　　<meta name=“viewport” content=“width=device-width, viewport-fit=cover”> 　　第二步： 　　...
iphonex适配 Home Indicator隐藏
韩老魔的博客
12-05 5928
全屏游戏Home Indicator太碍眼，想把它隐藏掉。 找到这个方法： - (BOOL)prefersHomeIndicatorAutoHidden { return YES; } 但是有个问题，每次触摸屏幕，Home Indicator又会出现， 停止触摸后大概 两三秒又会消失。但是对于需要不断操作的 游戏来说，这行代码没啥用。 我比较喜欢大话西游、剑与家园那样的效果，Home...
iOS开发之iOS13的适配（tabbar）
坤宇的博客
09-27 5794
if (@available(iOS 13.0, *)) { UITabBarAppearance *appearance = UITabBarAppearance.new; NSMutableParagraphStyle *par = [[NSMutableParagraphStyle alloc]init]; par.alig...
unity屏自动适配iphone刘海屏、灵动岛 屏幕
11-17
压缩包内的两个文件放在Assets/Editor...只适合iphone异形屏的屏幕适配（刘海屏、灵动岛，上面留黑的方式），安卓不需要 自动化脚本 需要真机测试！！！ 自动化脚本 需要真机测试！！！ 自动化脚本 需要真机测试！！！
IphoneX底部适配的实现
12-10
1.判断是否是IPhoneX手机 let isIphone = /iphone/gi.test(window.navigator.userAgent) let windowW = window.screen.width let windowH = window.screen.height let pixelRatio = window.devicePixelRatio ...
Iphone 4_iphone4_
10-03
iphone 4 schematic and service manual
移动端适配兼容--ios系统iphoneX等机型底部小横条处理，app嵌入的适配处理
梧桐落叶~~
07-04 3818
// 1.首先要在meta标签中加上viewport-fit=cover <meta name="viewport" content="width=device-width, viewport-fit=cover, xxxx"> // 2.整个内容区域 html,body { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); } // 3.如有底部
ios刘海屏适配
qq_35430000的博客
05-12 1353
现在ios的iphoneX、iphone11、iphone12都具有刘海屏的设计，这部分刘海屏机型和没有刘海屏的在页面显示上有一些差别。所以要做一下区分。 下面是ios主流机型的分辨率信息。 注意到在逻辑像素一项，iphoneX以上机型（包括iphone11、iphone12）逻辑像素高度 pt都大于等于812 所以默认逻辑像素高度 p大于等于812的就是iphoneX以上机型，而且这些机型都有刘海屏 // 是否iOS刘海屏 isIosLiuhai() { // 默认物理高度大于8
IOS iPhoneX适配以及常用适配属性和自定义导航栏配置
Steve_Abelieve
01-24 2417
背景： 《iPhone X 官方人机交互指南中文版》 《iPhone X适配没那么复杂，但也不是看上去这么简单》 《取消了Home键的 iPhone X，交互方式都有哪些变化？》 关键属性： ios 11之后原来automaticallyAdjustsScrollViewInsets属性无效，修改为 @available(iOS 11.0, *) public enum...
微信小程序获取openid流程
zai329979994639的博客
09-05 3506
微信小程序获取openid
css3之box-shadow
zai329979994639的博客
12-30 1594
css3阴影
css中动画之transition
zai329979994639的博客
12-29 1335
css动画
前端缓存【web缓存】
zai329979994639的博客
02-08 1065
前端缓存-高级教程
html中事件原理
zai329979994639的博客
10-10 781
事件
iframe与父级窗口通信
zai329979994639的博客
07-07 659
判断当前是否在iframe里面，有三种方法 1.方式一 if (window.self.frameElement && window.self.frameElement.tagName == “IFRAME”) { 　　console.log(‘iframe’); } 2.方式二 if (window.frames.length != window.parent.frames.length) { 　　console.log(‘iframe’); } 3.方式三 if (window.self
5分钟理解ts装饰器
zai329979994639的博客
08-13 630
类装饰器： 参数装饰器，然后依次是方法装饰器，访问符装饰器，或属性装饰器应用到每个实例成员。 参数装饰器应用到构造函数。 类装饰器应用到类。 // 1.1 类装饰 // 类的构造函数作为其唯一的参数。 console.log('----class decorae----'); function classDecorate(constructor: Function) { console.log(arguments); } @classDecorate class Hello { msg: st
ios_status_bar .StatusBarTime, .ios_status_bar .StatusBarSignal, .ios_status_bar .StatusBarWifi, .ios_status_bar .StatusBarBattery, .iphone_x_status_bar .StatusBarTime, .iphone_x_status_bar .StatusBarSignal, .iphone_x_status_bar .StatusBarWifi, .iphone_x_status_bar .StatusBarBattery, .android_status_bar .StatusBarTime, .android_status_bar .StatusBarSignal, .android_status_bar .StatusBarWifi, .android_status_bar .StatusBarBattery { display: flex; align-items: center; height: 100%; }
最新发布
06-10
`.ios_status_bar`、`.iphone_x_status_bar`和`.android_status_bar`是自定义的类名，用于设置不同风格的状态栏的样式。`.StatusBarTime`、`.StatusBarSignal`、`.StatusBarWifi`和`.StatusBarBattery`是状态栏中...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值