Android手机底部安全区域问题

这篇具有很好参考价值的文章主要介绍了Android手机底部安全区域问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

这个问题主要体在全面屏手机上,统称为安全区域

直接上图(不知道怎么调正,😓)

Android手机底部安全区域问题

这个问题刚开始困扰了我好久, 但是去看抖音发现它底部也是有安全区域的,才知道在Android上是无法完全消除的 (第二种的方法是可以消除掉的,但是会影响用户体验) 而抖音也该也是采用的第三种方式 

我一共找到了3种方案里解决这个问题

从最简单的来说

第一种:最物理的方式

关闭手机导航手势

Android手机底部安全区域问题

 第二种:这种对用户的体验效果不是很好(个人态度)

plus.navigator.hideSystemNavigation(true)

这种方法虽说有一定的可行性,但是唯一的缺点就是,每次退出需要从底部滑动两次,就跟退出手机游戏界面一样(例如:王者荣耀)

第三种:这个解决的也不是很好

let color, ac, c2int, win;
  	color = plus.android.newObject("android.graphics.Color")
  	ac = plus.android.runtimeMainActivity();
    c2int = plus.android.invoke(color, "parseColor", "#000000")
  	win = plus.android.invoke(ac, "getWindow");
  	plus.android.invoke(win, "setNavigationBarColor", c2int)

 这种其实就是在修改底部安全区域颜色

但是这种方法存在的最大问题就是页面跳转时会出现无法跳转,或者白屏、闪屏的问题

直接上效果

Android手机底部安全区域问题

最后发现这个方法不能平凡执行

解决方式就是让它只执行一次

onLaunch: function() {
  uni.hideTabBar()    
  // 只是被封装了,用法还是那样
  this.$utils.upTabColor("#000000")
  // 禁止横屏
  plus.screen.lockOrientation("portrait-primary")
},

这样就不会出现白屏问题

归根结底最好的方式还是最物理的方法,毕竟代码能力有限,无法去操作系统问题

哦对了;华为因为是鸿蒙系统,没有这个东西呢 文章来源地址https://www.toymoban.com/news/detail-493651.html

到了这里,关于Android手机底部安全区域问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 关于适配iphoneX以上机型底部小黑条的安全区域的问题

    随着iPhoneX及之后的机型逐渐普及,底部小黑条的安全区域也成为了前端开发中需要特别关注的一项问题。如果不进行适配,底部小黑条可能会遮盖页面内容或者导致UI界面错乱,严重影响用户体验。本文将介绍如何使用CSS和JavaScript代码来对iPhoneX以上机型的底部小黑条的安全

    2024年02月12日
    浏览(64)
  • 移动端怎么适配顶部跟底部的安全区域

    移动端适配顶部底部的安全区域,是为了保证页面在 IOS 和 Android 系统下的显示效果和用户体验。 通常来说,IOS 设备在页面顶部和底部都会预留出一定的安全区域,底部安全区域的高度和设备尺寸、系统版本等相关,一般在 34~44px 之间。而 Android 设备在页面顶部通常不需要预

    2024年02月11日
    浏览(59)
  • uniapp开发小程序,设置iphone底部安全区域

    上面dom结构的,根据需求是这样的:整个屏幕被两个view占满,其中底部view是固定在底部不动的,content内容立马是高度盛满剩下屏幕高度,并且overflow:scorll ; safeArea里面的动态样式中的safeAreaBottom是vuex保存的值,后面加的114,是底部高度再略高一点:“100+14” ,其中14你给

    2024年02月12日
    浏览(56)
  • (保姆级)微信小程序 iPhone 11、iPhoneX 底部安全区域(底部小黑条)适配

    在移动端开发过程中,经常遇到iphone11、iphoneX底部小黑条遮挡页面底部,纯css实现设备的适配。详见我的上篇文章。 在开发微信小程序中,也会遇到iPhone全面屏手机,底部小黑条会遮挡页面底部,尽管微信小程序已经实现部分页面的适配,但个别页面仍旧需要做适配处理。

    2024年02月13日
    浏览(43)
  • CSS_IOS适配状态栏和IOS底部安全区域

    计算属性 先constant再env 计算属性 safe-area-inset-left: 安全区域距离左边界的距离 safe-area-inset-right: 安全区域距离右边界的距离 safe-area-inset-top: 安全区域距离顶部边界的距离 safe-area-inset-bottom: 安全区域距离底部边界的距离

    2024年02月10日
    浏览(39)
  • 微信小程序适配iphoneX,XR,12及以上,获取底部安全区域

    iphone x及以上的异形屏top高度为44px(或以上),非异形屏为20px。 先判断是否为异形屏,如果是,获取到底部小黑条区域的高度。在页面设置底边距padding-bottom/margin-bottom,把内容区域隔开。 小黑条区域高度=屏幕高度-安全区域的bottom值,安全区域指的是内容可见区域 注意小

    2024年03月11日
    浏览(71)
  • uniapp 打包成APP或小程序后或H5后 IOS(iphoneX机型) 底部安全区域适配(避开底部黑条虚拟键)

    在 manifest.json 文件的 \\\"app-plus\\\" 节点下添加 \\\" safearea \\\" 适配 iOS 的安全区域, \\\"background\\\" 对应正常模式下安全区域外的背景颜色, \\\"backgroundDark\\\"对应暗黑模式(夜间模式 / 深色模式)下安全区域外的背景颜色 APP端不使用配置,非APP端可不配置   然后使用CSS常量    constant(safe-are

    2024年02月22日
    浏览(50)
  • 【移动端应用开发】 以 uniapp 打包成 APP 或小程序后或 H5 后 IOS(iphoneX 机型)底部安全区域适配(避开底部黑条虚拟键)

    一、前言 在使用 uniapp 进行应用开发时,可能会遇到应用在 iPhone X 等带有底部安全区域的机型上显示不正常的问题。这是因为 iPhone X 及之后的机型采用了全面屏设计,屏幕底部有一个黑色的虚拟键区域,俗称\\\"刘海\\\"或\\\"黑条\\\"。为了避免应用内容被底部安全区域遮挡,需要进行

    2024年02月19日
    浏览(70)
  • uniapp系列-改变底部安全区-顶部的手机信号、时间、电池栏颜色样式

    下图是底部安全区原始状态,感觉和整个页面格格不入 修改代码配置safearea manifest.json(下面代码仅支持ios) manifest.json(下面代码支持android) 底部区域颜色已配置成功(下图仅供参考,随便选的颜色,有点丑哈哈) 配置顶部导航栏颜色 方案一:仅适用于原生导航配置,非

    2023年04月22日
    浏览(55)
  • uniapp前端手机获取安全区域css值 防止按键不能被点击

     再编写小程序和移动端的时候可能会出现这种情况, 页面中的按键刚好才手机中按不到的位置   如下 这是苹果手机的home按键 如果刚好我们的按钮再这个位置,用户是点击不到的 我们就需要一个办法,能够自动的让我们的按键移动到安全可点击的区域 我们可以使用如下的值

    2024年02月19日
    浏览(34)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包