精华内容
下载资源
问答
  • ios设置安全区域高度

    2021-10-08 17:06:50
    env()和constant(),是IOS11新增特性,Webkit的css函数,用于设定安全区域与边界的距离,有4个预定义变量: safe-area-inset-left:安全区域距离左边边界的距离 safe-area-inset-right:安全区域距离右边边界的距离 ...

    env()和constant(),是IOS11新增特性,Webkit的css函数,用于设定安全区域与边界的距离,有4个预定义变量:

    safe-area-inset-left:安全区域距离左边边界的距离
    safe-area-inset-right:安全区域距离右边边界的距离
    safe-area-inset-top:安全区域距离顶部边界的距离
    safe-area-inset-bottom :安全距离底部边界的距离
    而env()和constant()函数有个必要的使用前提,H5网页设置viewport-fit=cover的时候才生效,小程序里的viewport-fit默认是cover。

     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">里插入代码片
    

    未适配底部效果:

    在这里插入图片描述

    适配底部代码:

    复制代码

    height: calc(96rpx+ constant(safe-area-inset-bottom));//兼容 IOS<11.2
    
    height: calc(96rpx + env(safe-area-inset-bottom));//兼容 IOS>11.2
    
    padding-bottom: constant(safe-area-inset-bottom);//兼容 IOS<11.2
    
    padding-bottom: env(safe-area-inset-bottom);//兼容 IOS>11.2
    

    // 先constant再env
    复制代码

    适配后效果

    在这里插入图片描述

    2021-04-23补充:

    在写小程序(自定义tabBar)发现有些古老IOS机型不支持 env(safe-area-inset-bottom)等属性,

    展开全文
  • android 刘海尖和全面屏底部多出一定高度,目测接近iOS安全区域高度。但是配置的是无安全区域,plus.navigator.getSafeAreaInsets()获取的四个值都是0,sdk版本是2019年12月11日版本manifest配置:"safearea" : {...

    android 刘海尖和全面屏底部多出一定高度,目测接近iOS安全区域高度。但是配置的是无安全区域,plus.navigator.getSafeAreaInsets()获取的四个值都是0,sdk版本是2019年12月11日版本

    manifest配置:

    "safearea" : {

    "background" : "none",

    "bottom" : {

    "offset" : "none"

    }

    }

    css:

    .am-home-nav {

    padding-bottom: 0 !important;

    background-color: #fff;

    border-top: 1px solid #ebebeb;

    z-index: 4

    }

    .am-home-nav>a {

    display: block;

    width: 33.3333%;

    height: 48px;

    float: left;

    margin: 0;

    padding: 0;

    padding-top: 1.75rem;

    position: relative;

    border-left: 0;

    border-radius: 0;

    text-align: center;

    color: #000;

    font-size: .75rem;

    overflow: hidden

    }

    .am-home-nav>a.am-on {

    color: #1496ff

    }

    .am-home-nav>a.am-active {

    background-color: #f2f2f2

    }

    .am-home-nav>a span {

    display: block;

    position: absolute;

    left: 50%;

    top: 6px;

    -webkit-transform: translate3d(-50%, 0, 0)

    }

    @media screen and (max-width:320px) {

    .am-home-nav>a {

    padding-top: 1.9rem

    }

    }

    html

    展开全文
  • 最近写小程序时,遇到了 iPhoneX 底部小黑线与内容重叠的问题,实际上是iPhoneX安全区域的适配问题,了解清楚这个问题花了挺多时间的,也实操出了结果,忍不住来总结总结。前言在苹果 iPhoneX 、iPhone XR等设备上,...

    最近写小程序时,遇到了 iPhoneX 底部小黑线与内容重叠的问题,实际上是iPhoneX安全区域的适配问题,了解清楚这个问题花了挺多时间的,也实操出了结果,忍不住来总结总结。

    前言

    在苹果 iPhoneX 、iPhone XR等设备上,可以看到物理Home键被取消,改为底部小黑条替代home键功能。微信小程序和 h5 网页需要针对这种情况进行适配,否则可能会遇到底部按钮或选项卡栏与底部黑线重叠的情况,如下图。

    b92ee49f4cc550f292cdff16032668d8.png

    1. 安全区域是什么意思?

    想要解决内容与小黑线重叠的问题,我们需要先了解清楚苹果对于安全区域的定义。

    安全区域

    安全区域指的是一个可视窗口范围,处于安全区域的内容不受圆角(corners)、齐刘海(sensor housing)、小黑条(Home Indicator)的影响。

    看看苹果官方给的这2张图就明白了,中间蓝色区域即为安全区域。也就是说,适配安全区域也就是让小程序或者H5的内容显示在蓝色区域部分。

    b0bf79970af5a9ca2f175bb89a0df8f2.png

    同时安全区域是在IOS11之后并且是iPhoneX及以上机型才有的,所以需要适配的是这一类机型(为了方便,下文中统称这类需要适配的机型为iPhoneX),更老的机型则不需要考虑适配问题。

    2. 在微信小程序上适配安全区域

    三种方案:

    使用已知底部小黑条高度34px/68rpx来适配(不推荐)

    使用微信官方API,getSystemInfo()中的safeArea对象进行适配(推荐)

    使用苹果官方推出的css函数env()、constant()适配(推荐)函数env()、constant()适配(推荐)的css函数env()、constant()适配(推荐)

    方案一:使用已知底部小黑条高度34px/68rpx来适配(不推荐)

    这是比较老的方法,跟方案2、3比已经不推荐了,大家可以了解了解,着急可以直接看方案2和3。

    从网上了解到,iPhone底部的小黑条(Home Indicator)高度是34px,实际我也在真机确认了是34px,所以可以根据该值,设置底部按钮或选项卡的margin-bottom、padding-bottom、height等,或者添加一个div来占位小黑条的位置。

    这样做要有一个前提,需要判断当前机型是需要适配安全区域的机型。

    问题:如何判断当前机型是需要适配安全区域

    2种方案:

    使用wx.getSystemInfoSync()的model属性判断

    使用wx.getSystemInfoSync()中的screenHeight和safeArea对象的bottom属性判断

    方法一:使用wx.getSystemInfoSync()的model属性判断

    已知市面上已有的带安全区域的苹果设备包括iPhone X、iPhone XR、iPhone XS Max、iPhone 11、iPhone 11 Pro、iPhone 11 Pro Max,所以可以直接从getSystemInfoSync()方法中拿到model属性进行判断。iPhone系列微信还未适配手机的model返回值为unknown(iphone),也可以提前做适配。

    let IPHONE_X = /iphone x/i

    let IPHONE_X_11 = /iphone 11/i

    let IPHONE_UNKNOWN = /unknown\(iphone\)/i

    //方法一:使用model判断是否是IPhoneX及其他包含安全区域的机型手机

    const isIPhoneX = () => {

    let model = wx.getSystemInfoSync().model

    return (model.search(IPHONE_X) > -1 || model.search(IPHONE_X_11) > -1 ||

    model.search(IPHONE_UNKNOWN) > -1)

    }

    //也可以使用正则表达式判断

    const isIPhoneXRegex = () => {

    let model = wx.getSystemInfoSync().model

    return (/iphone\sx/i.test(model)

    || (/iphone/i.test(model) && /unknown/.test(model))

    || /iphone\s11/i.test(model))

    }

    方法二:使用wx.getSystemInfoSync()中的screenHeight和safeArea对象的bottom属性判断

    这里使用screenHeight而不是windowHeight,因为bottom是以屏幕左上角为原点开始计算的,所以需要的是屏幕高度,对比screenHeight和bottom,如果相等则说明不需要适配,不相等则需要适配。

    注意:如果使用微信开发者工具中的模拟器,screenHeight和bottom始终是相等的,需要用真机来测试。

    //方法二:使用wx.getSystemInfoSync()中的screenHeight和safeArea的bottom判断

    const isIPhoneX = () => {

    let screenHeight = wx.getSystemInfoSync().screenHeight

    let bottom = wx.getSystemInfoSync().safeArea.bottom

    return screenHeight !== bottom

    }

    解决了如何判断设备是iPhoneX的问题,就可以写代码了。

    底部按钮

    方案二:使用微信官方API,getSystemInfo()中的safeArea对象进行适配(推荐)

    使用wx. getSystemInfo()中的safeArea对象获取底部小黑条的高度

    step 1:使用上面讲的方法先判断是否是需要适配的iPhone机型

    step 2:如果是需要适配的机型,使用safeArea中的bottom,得到安全区域底部纵坐标,然后使用screenHeight减去bottom就能得到小黑条的高度。保存到localstorage里面,全局都可以使用。

    c7c69118d2aa7ffd82d4b6520b52ec8a.png

    方案三:使用苹果官方推出适配方案css函数env()、constant()来适配 (推荐)

    苹果官方推荐使用env(),constant()来适配,建议使用该方案,不需要管数值具体是多少。这2个方法是什么呢?

    env()和constant(),是IOS11新增特性,Webkit的css函数,用于设定安全区域与边界的距离,有4个预定义变量:

    safe-area-inset-left:安全区域距离左边边界的距离

    safe-area-inset-right:安全区域距离右边边界的距离

    safe-area-inset-top:安全区域距离顶部边界的距离

    safe-area-inset-bottom :安全距离底部边界的距离

    因为目标是需要对底部小黑条做适配,所以只需要关注safe-area-inset-bottom这个值。

    而env()和constant()函数有个必要的使用前提,当网页设置viewport-fit=cover的时候才生效,根据微信小程序的表现和我在实际真机测试时这两个函数生效,推测小程序里的viewport-fit默认是cover。

    有一点要注意,在IOS11.2系统以前,可以使用constant()函数,但是在IOS11.2系统以后,这个函数就被废弃了,被env()函数替代了。官方原话如下:

    The env() function shipped in iOS 11 with the name constant(). Beginning with Safari Technology Preview 41 and the iOS 11.2 beta, constant() has been removed and replaced with env(). You can use the CSS fallback mechanism to support both versions, if necessary, but should prefer env() going forward.

    所以我们在做屏幕适配时,需要这样写:

    padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/

    padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/

    注意:env()和constant()需要同时存在,而且顺序不能换。

    3. 在H5上适配安全区域

    在H5上适配安全区域就方便多了,采用viewport+env+constant方案。

    viewport-fit 默认有3个值:

    contain:可视窗口完全包含网页内容(左图)

    cover:网页内容完全覆盖可视窗口(右图)

    auto:默认值,此值不影响初始布局视图端口,并且整个web页面都是可查看的。

    contain和cover具体区别如下图:

    349bc225e23297be316603f813badd1a.png

    而我们需要将viewport设置为cover,env和constant才能生效。设置代码如下:

    同时设置env和constant代码,同样env()和constant()需要同时存在,而且顺序不能换。

    /* 可以通过增加padding-bottom来适配 */

    padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/

    padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/

    /* 可以通过margin-bottom来适配 */

    margin-bottom: constant(safe-area-inset-bottom);

    margin-bottom: env(safe-area-inset-bottom);

    /* 或者改变高度*/

    height: calc(55px + constant(safe-area-inset-bottom));

    height: calc(55px + env(safe-area-inset-bottom));

    也可以在底部添加一个空白的div颜色块来做适配。

    还有一种是使用 @supports 隔离兼容样式

    可以使用 @supports 来隔离兼容样式,当浏览器支持bottom: constant(safe-area-inset-bottom)或者bottom: env(safe-area-inset-bottom)的时候,bottom-button类就会新增margin-bottom的样式

    @supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {

    .bottom-button {

    margin-bottom: constant(safe-area-inset-bottom);

    margin-bottom: env(safe-area-inset-bottom);

    }

    }

    以上就是我对iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5适配的总结。

    如果对你有帮助的话,点赞、评论、赞赏都是对我的鼓励,也是支持我写下去的动力,谢谢!

    参考文章:

    到此这篇关于iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配的文章就介绍到这了,更多相关iPhoneX底部H5的屏幕适配内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

    展开全文
  • 针对涉及公共场所的LED电子显示屏、各楼层电视、会议室电视、投影在保重期间避免安全风险要做以下工作: 一是要提高认识,强化安全责任意识和风险意识,全面自查存在的问题,抓细节、重实效,消除安全隐患。 二...

    针对涉及公共场所的LED电子显示屏、各楼层电视、会议室电视、投影在保重期间避免安全风险要做以下工作:

    一是要提高认识,强化安全责任意识和风险意识,全面自查存在的问题,抓细节、重实效,消除安全隐患。

    二建立并梳理涉及公共场所的LED电子显示屏、各楼层电视、会议室电视、投影的资产台账。

    三是明确LED电子显示屏、各楼层电视、会议室电视、投影的主体责任人及运维责任人,专人负责、专人值守、专人巡察,应急响应,避免无关人员非授权控制显示屏,确保管理权限的有效控制。同时在每一块屏幕下方明显位置贴上标签,注明责任单位、责任人及联系方式。

    四是通过日常管理,明确编辑、审批、发布、检验等完整闭环流程,对通过服务端发布的动作要明确操作人员、审核人员。确保操作准确,加强内容更新权限管理的安全审核,避免操作失误导致的散播不当信息。

    五是在重保期间对于非使用的显示屏、投屏设备等关闭有线,无线连接功能,确保处于断网状态。

    六是对不联网通过U盘等本地播放的公共场所LED电子显示屏、各楼层电视、会议室电视、投影设备应对显示终端开启登录验证,通过电脑与u盘绑定等手段加强对USB端口的物理防护不能有外露的USB接口,减少被攻击入口。

    七是对确需联网使用的显示设备加强服务端口安全防护,减少不必要的无线和远程管理功能,定时开关机,加强对维护计算机的安全防护。

    八是对于发生显示屏控制系统被攻击或内容被篡改等事件的,要第一时间消除影响,收集证据,并立即向上报。如发现屏幕内容被插播,屏幕管理员必须能及时切断电源;如管理员不在附近的,须就近安排人员,确保能及时切断电源;同时附近的安保人员立刻启动应急响应。

    针对涉及公共场所的LED电子显示屏、各楼层电视、会议室电视、投影在保重期间避免安全风险要做以下工作:

    一是要提高认识,强化安全责任意识和风险意识,全面自查存在的问题,抓细节、重实效,消除安全隐患。

    二建立并梳理涉及公共场所的LED电子显示屏、各楼层电视、会议室电视、投影的资产台账。

    三是明确LED电子显示屏、各楼层电视、会议室电视、投影的主体责任人及运维责任人,专人负责、专人值守、专人巡察,应急响应,避免无关人员非授权控制显示屏,确保管理权限的有效控制。同时在每一块屏幕下方明显位置贴上标签,注明责任单位、责任人及联系方式。

    四是通过日常管理,明确编辑、审批、发布、检验等完整闭环流程,对通过服务端发布的动作要明确操作人员、审核人员。确保操作准确,加强内容更新权限管理的安全审核,避免操作失误导致的散播不当信息。

    五是在重保期间对于非使用的显示屏、投屏设备等关闭有线,无线连接功能,确保处于断网状态。

    六是对不联网通过U盘等本地播放的公共场所LED电子显示屏、各楼层电视、会议室电视、投影设备应对显示终端开启登录验证,通过电脑与u盘绑定等手段加强对USB端口的物理防护不能有外露的USB接口,减少被攻击入口。

    七是对确需联网使用的显示设备加强服务端口安全防护,减少不必要的无线和远程管理功能,定时开关机,加强对维护计算机的安全防护。

    八是对于发生显示屏控制系统被攻击或内容被篡改等事件的,要第一时间消除影响,收集证据,并立即向上报。如发现屏幕内容被插播,屏幕管理员必须能及时切断电源;如管理员不在附近的,须就近安排人员,确保能及时切断电源;同时附近的安保人员立刻启动应急响应。

    展开全文
  • H5适配iPhoneX安全区域3.1:设置网页在可视窗口的布局方式3.2 页面主体内容限定在安全区域内仅考虑竖屏的设置考虑横屏的设置 最近写小程序时,在独立建立小程序项目框架时,遇到了 iPhoneX 安全区域的问题。由于在 ...
  • 倒没有发现电脑有什么实质的问题,只是不太理解又觉得好奇,于是就上网查了查,因为没有发现电脑有什么实质的问题,所以犯懒没有鼓捣自己的电脑。 以下内容皆由网络所得,由本人整理汇总,希望有所帮助。 可能的原因...
  • SystemUiOverlayStyle systemUiOverlayStyle = SystemUiOverlayStyle( statusBarColor: Colors.transparent, ///这是设置状态栏的图标和字体的颜色 ///Brightness.light 一般都是显示为白色 ///Brightness.dark ...
  • 就是此处的安全点和安全区域。 2. 问:什么是安全点Safe Point? 程序执行时并非在所有地方都能停顿下来开始GC , 只有在特定的位置才能停顿下来开始GC , 这些位置称为“ 安全点(Safepoint)。 2.1 安全点的选择 ...
  • 在使用电脑的时候,经常会遇到这样的情况,命名电脑WLAN已经连接好了,然而显示的却是“无Internet,安全”,或者无法连接网络。那么这是怎么回事呢?如何解决呢?一起来看看吧!电脑WLAN已连接但显示无Internet,...
  • 关于电脑右下角图标显示问题,今天我就以如何更改WIN7通知区域图标,和大家分享一下怎样设置电脑右下角图标显示和隐藏的问题。其实很简单,大家跟着一起走一遍就明白了。方法/步骤首先,来看看当前系统的通知区域...
  • IE安全设置

    2021-07-22 05:40:28
    中文名IE安全设置类别网络信息知识IE安全设置IE浏览器编辑语音IE提供的自动完成表单和Web地址功能为我们带来了便利,但同时也存在泄密的危险。默认情况下自动完成功能是打开的,我们填写的表单信...
  • 好多网友反馈说关于对win10系统通知区域图标、电脑右下角图标显示和隐藏设置设置的方法,在使用win10系统的过程中经常不知道如何去对win10系统通知区域图标、电脑右下角图标显示和隐藏设置进行设置,有什么好的办法...
  • 近期有电脑用户反应打开网页的时候会弹出“已阻止此网站显示安全证书错误的内容”,无法正常访问网页,怎么办?弹出这样的提示后点击后进行安装会出现无法安装的现象,非常的尴尬,那已阻止此网站显示安全证书...
  • 可能原因一:未开启443端口可能原因二:配置文件未配置正确请根据可能原因选择操作步骤:原因一:未开启443端口解决方法:在安装SSL证书的服务器上开启443端口,同时在安全组增加443端口,避免安装后仍然无法启用...
  • 监控显示无网络视频的原因有:接口接触不良;监视器出现故障;产品不合格;由于电压不稳摄像头被烧坏;设备连接错误;监控卡坏了;驱动没装好;供电问题等几种原因。监控系统是安防系统中应用最多的系统之一,现在...
  • [安全扩展组件]TZASC

    千次阅读 2021-11-22 16:48:39
    TZASC地址空间控制器 ...[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pIPHsU7m-1637570897609)(C:\Users\Jiaqi.Zhang\Desktop\文档编写\ARM文档\安全\硬件相关\安全扩展组件\
  • 有可能你发表同一主题或操作频率过快被系统侦测到(把这个域名复制到地址栏,回车就可以)进入,先登录再进入QQ空间 方法三:先进别人的空间,然后在窗口的左下角或者左上角(看你用什么浏览器)有个“我的空间”进入...
  • Windows10无法启动windows安全中心服务怎么办?
  • 原标题:Linux 黑话解释:Xorg,X11,Wayland,什么是显示服务器您是否想知道X Server,Xorg,X11,Wayland以及诸如此类的东西到底是什么?Wayland vs Xorg,哪个更好?本指南就为你详细讲解。您总是会遇到这些术语...
  • 战地4服务器区域设置

    2021-08-11 02:45:23
    战地4服务器区域设置 内容精选换一换在使用负载均衡前,需要根据业务规划待创建负载均衡器的区域、类型、协议以及后端服务器等。负载均衡器选择区域时需要注意以下事项:选择距离业务目标客户距离最近的区域,可以...
  • Halcon之感兴趣的区域

    2021-09-27 13:56:28
    文章目录2、感兴趣的区域2.1 基本概念2.1.1 Create Region2.1.2 Create ROI2.1.3 A First Example2.2 扩展概念2.2.1 分割图像2.2.2 绘制区域2.2.3 创建区域2.2.4 处理区域2.2.5 对齐 ROI 或图像2.2.6 Create ROI...
  • 宏病毒之入门基础、防御措施、自发邮件及APT28宏样本分析 [系统安全] 二十.PE数字签名之(上)什么是数字签名及Signtool签名工具详解 [系统安全] 二十一.PE数字签名之(中)Signcode、PEView、010Editor、Asn1View工具...
  • 1、很有可能是地方区域的机房问题,或者一时登录人太多导致服务异常。2、如果确定不是官方问题的话,那可能就是人太多了,需要多刷新几次,毕竟办理交通事务的车主和用户比较多!扩展资料:1、“交管12123”是公安部...
  • 操作步骤如下:①打开“(Insmgmt”控制台窗口,选择要创建正向查找区域的DNS服务器,然后在菜单栏中选择“操作”—“新建区域”命令,如图1所示。②弹出如图2所示的“新建区域向导”对话框,该向导将引导用户创建新...
  • 电脑分辨率究竟是什么?它有什么作用呢?这些问题都是电脑初学者比较在意的问题。下面就由学习啦小编为大家一一介绍吧。分辨率英文全称为resolution...显示器可显示的像素越多,画面就越精细,同样的屏幕区域内能显示...
  • strcpy为何不安全

    2021-05-20 17:39:11
    这个函数确实非常方便,但是这个函数是非常不安全,由与这个函数而产生的缓冲区溢出漏洞在很多文章中都有所介绍。我们应该摒弃strcpy的使用,而是用strncpy进行代替。原型声明:char*strcpy(char*dest,constchar*src...
  • 在分享之前,笔者先简单总结一些什么是功能安全? 字面意思上看,就是保证功能安全的运行。 从技术上来讲,就是更合理的异常处理。当然,并不是所有的异常都要处理。 汽车功能安全的标准是 ISO26262 ,其中对
  • Windows安全配置 一、关闭Windows远程注册表 01-安全风险:禁用危险的远程...二、设置登录系统时不显示上次登录的用户 01-安全风险:用户名泄露,增强爆破成功的可能性 02-安全措施:控制面板->本地安全..

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 186,829
精华内容 74,731
关键字:

安全区域显示是什么