IOS安全区域适配

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

对于 iPhone 8 和以往的 iPhone,由于屏幕规规整整的矩形,安全区就是整块屏幕。但自从苹果手机 iphoneX 发布之后,前端人员在开发移动端Web页面时,得多注意一个对 IOS 所谓安全区域范围的适配。这其实说白了就是 iphoneX 之后的苹果手机,在页面上,你需要对顶部和底部多预留一点空间。造成这个问题的主要原因就是苹果手机在屏幕上出现了所谓的刘海屏,而且更是在屏幕下方加了一条小黑条

如图:
ios 安全区域是什么,移动端开发,ios,ui

安全区数值:

ios 安全区域是什么,移动端开发,ios,ui
手机纵向时,安全区上沿是从屏幕最顶端往下 44 pt,所以,安全区并不是和「齐刘海」完全齐平,而是要再往下一点点。

「下巴」位置上,为了给 Home 指示条足够的空间,从下往上推 34 pt 开始才被视为安全区。

把屏幕横过来的时候,「安全区」又产生了变化:Home 指示条挪到了屏幕下方,而「留海」和「下巴」的安全范围保持不变。也就是说,横向的安全区被“压缩”得更狭长了。

ios 安全区域是什么,移动端开发,ios,ui

对于指示条位移但纵向安全区不变,官方给出的解释是:

用户在使用手机时非常依赖肌肉记忆(比如你可以不看键盘打字),不对称的设计尽管可以更有效地利用屏幕,但却与用户肌肉记忆相悖,容易引起误操作。水平布局时,交互元素两侧距离相等,左侧右侧旋转时位置固定,可以方便用户记忆。

能想到那么细节的问题,还是要给苹果点个赞。

ios 安全区域是什么,移动端开发,ios,ui
绿色区域是安全区域,蓝色是margin

不过也有个例外,如果是滚动的长列表,为了达到全屏展示效果,文案和按钮是可以超出安全区的。

ios 安全区域是什么,移动端开发,ios,ui


下面我们分别介绍一下通过 CSS 和 JS 怎么去处理,根据场景你可以自行选择。

CSS

iOS11 新增特性中,Webkit 包含了两个新的函数 env()constant(),以及四个预定义的常量:

  • safe-area-inset-top:安全区域距离顶部边界距离,状态栏+导航栏大约为88px。
  • safe-area-inset-left:安全区域距离左边边界距离,竖屏时为0。
  • safe-area-inset-right:安全区域距离右边边界距离,竖屏时为0。
  • safe-area-inset-bottom:安全区域距离底部边界距离,大约高度为34px。

我们可以这样子使用它们:

body{
    /* 兼容 iOS < 11.2 */
    padding-top: constant(safe-area-inset-top);
    padding-left: constant(safe-area-inset-left);
    padding-right: constant(safe-area-inset-right);
    padding-bottom: constant(safe-area-inset-bottom);
    /* 兼容 iOS >= 11.2 */
    padding-top: env(safe-area-inset-top);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
}

当然,你也可以在某个固定(fixed)在底部的元素上单独使用:

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

JS

当然,有时候单纯的 CSS 方式并不能满足实际的需求场景,那么我们就需要判断出那些 IOS 的手机屏幕是需要特殊处理的。

而 iphoneX 之后的苹果手机 Series 参数如下:
ios 安全区域是什么,移动端开发,ios,ui
根据这些参数我们把苹果手机的长屏,也就是拿屏幕的高度用来当成判断条件:

 /**
 * 判断IOS异形屏
 * @returns
 */
export function isIphoneX(){
  if (typeof window !== 'undefined' && window) {
    var faultTolerantVal = 10; // 容错值
    return /iphone/gi.test(window.navigator.userAgent) && (window.screen.height + faultTolerantVal) >= 812;
  }
  return false;
};

需要的注意一点:H5网页设置 viewport-fit=cover的时候才会生效,小程序里的viewport-fit默认是 cover。

为了更好的理解上文意思,我们来看一下适配前后的效果:

ios 安全区域是什么,移动端开发,ios,ui

参考链接:

做移动端Web页面时,处理IOS的安全区域文章来源地址https://www.toymoban.com/news/detail-779644.html

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

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

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

相关文章

  • uniapp 打包成APP或小程序后或H5后 IOS(iphoneX机型) 底部安全区域适配(避开底部黑条虚拟键)

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

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

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

    2024年02月11日
    浏览(58)
  • uniapp中ios底部安全区域问题

    1、App:在manifest.json源码视图中找到app-plus,添加safearea配置 2、给page设置CSS 3、找到template.h5.html文件,给meta添加viewport-fit=cover

    2024年02月11日
    浏览(38)
  • element ui ios移动端 表单兼容问题

    element ui 的表单在禁用状态时,在android手机显示无与pc显示一样,但是在ios显示却天差地别,基本看不到input    placeholder   属性添加的默认提示信息。效果图如下: 在ios显示:  在android手机: 怎么改css都没用,后面查了一些资料,才找到问题所在: 移动端环境下android只需

    2024年02月04日
    浏览(45)
  • uniApp解决ios app真机底部安全区域(空白)问题

    首先我们要打开项目中的manifest.json文件,找到开源码视图配置,添加和修改: 视图如下:

    2024年01月24日
    浏览(39)
  • 小程序IOS安全区域优化:safe-area-inset-bottom

    最近发现公司的小程序代码中有一些很陌生的代码 safe-area-inset-bottom ,本以为是什么高级用法,查阅资料才发现是我孤陋寡闻了,原来是css的属性。 先来说一下用法及作用: IOS全面屏底部有小黑线,位于底部的元素会被黑线阻挡,可以使用以下样式: 获取高度时,可用:

    2024年02月13日
    浏览(37)
  • iOS16新特性 | 灵动岛适配开发与到家业务场景结合的探索实践

    作者:京东零售 姜海 灵动岛是苹果在iPhone 14 Pro和iPhone 14 Pro Max上首次提出的全新UI交互形式,创新性的让虚拟软件和硬件的交互变得更为流畅。当有来电、短信等通知时,灵动岛会变化形态,以便让用户能够更直观地接收到这些信息。 而在用户使用一些应用App,比如音乐,

    2023年04月12日
    浏览(36)
  • Unity开发——移动端实用特性使用(安卓/IOS)

    如何让屏幕保持常亮?如何获取手机当前电量?如何…? 接下来列举一些实用特性和方法: 1.防止屏幕休眠,从而让屏幕保持常亮 SleepTimeout.NeverSleep是一个特殊的值,它会禁止屏幕进入休眠状态,因此屏幕会保持常亮。 注意,这个设置可能会导致用户的电池电量消耗增加 ,

    2024年02月15日
    浏览(38)
  • 如何开发移动应用:iOS和Android的比较

    移动应用开发领域一直以来都备受关注,而iOS和Android作为两大主要的移动操作系统,各自拥有强大的生态系统和开发工具。在本文中,我们将比较iOS和Android移动应用开发的关键方面,以帮助开发者选择合适的平台,或者了解在不同平台上开发应用时需要考虑的因素。 iOS iO

    2024年02月07日
    浏览(47)
  • 移动应用开发介绍及iOS方向学习路线(HUT移动组版)

    ​ 作为一个HUT移动组待了一坤年(两年半)多的老人,在这里为还在考虑进哪个组的萌新们以及将来进组的新朋友提供一份关于移动应用开发介绍以及学习路线的白话文,因为我是iOS方向的,所以学习路线就只介绍iOS了,希望这篇文章对你了解移动应用开发有帮助。 ​ 从字

    2024年02月04日
    浏览(39)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包