背景：最近有在做关于Android底部多tab下，对应多个Flutter Fragment的操作。又遇到一个比较坑的问题:FlutterFragment中的flutter页面的SafeArea失效（关于safeArea具体介绍参考官方SafeArea class），简单举例说一下SafeArea的作用：如果你有一刘海屏的手机，如果你的flutter内容为全屏，假如你的内容在全屏最顶部，那么所谓的刘
全屏H5网页和小游戏解决方法1、方法及其简单，只需在html文件的头部viewport行加入viewport-fit=cover即可。 截图展示如下(因没有H5网页项目，这里暂用cocoscreator代替，但解决方式是一样的。): 可复制粘贴代码如下：<meta name="viewport" content="width=device-width, initial-scale=1.0,m
转载
2024-08-29 14:51:55
134阅读
我在开发视频播放时，使用系统默认控件VideoView，然后增加MediaController来控制播放。然而，最近在MI 8（刘海屏手机）测试时，发现控制区域的进度条没有显示！开始以为是操作系统差异，没有去跟踪问题。后来在切换为横屏时，发现存在进度条，但是控件往右边偏移了一段距离。界面上还有其它控件，但是它们位置是正确的，只有MediaController位置有问题。 之后，我再找了一台手机（非
转载
2023-11-24 09:58:19
125阅读
安全区域(Safe Area) 在iOS11以前, 自定义UIViewController时, 从来没有考虑过topLayoutGuide和bottomLayoutGuide这两个属性.但是在iOS11出来之后,这两个属性被废弃,取而代之的就是safeArea的概念，safeArea是描述你的视图部分不被任何内容遮挡的方法。 它提供两种方式：safeAreaInsets或safeAreaLayo
转载
2024-06-13 20:43:46
500阅读
# iOS 刘海屏去除安全区
随着 iPhone X 的推出，刘海屏成为了一种流行趋势，这也对开发者在 UI 设计上提出了新的挑战。刘海屏不仅影响了视觉效果，还对应用的安全区域（Safe Area）提出了新的要求。在本文中，我们将讨论如何在 iOS 应用中处理刘海屏的安全区，并提供相应的代码示例。
## 什么是安全区？
安全区是指iOS中一种机制，用于确保用户界面不会被设备的刘海、虚拟 Ho
原创
2024-10-05 03:44:46
225阅读
一、解决iphonX白条,网站扩展到整个屏幕网页在iphoneX的浏览器屏幕显示上，默认情况下在头部的2侧会出现白条背景，网站被限制在了一个“安全区域”内，移除白色背景的方法方法一：设置body的背景色：.body{
background-color：#f00;
} 方法二：添加mate属性viewport-fit=cover<meta name="viewport" c
转载
2023-09-17 18:40:23
507阅读
前言前些年的iphone X一出现 手机厂商纷纷取消了实体的物理按键，ios取而代之的是底部的一个大横条 安卓这边基本上也有不少虚拟按键的厂商 就会导致一些比较奇葩的问题出现 比如 这种的情况的发生，或者说刘海屏，挖孔屏 一般来说这种时候，都需要我们前端去进行设备适配。适配之前需要了解的几个新知识安全区域 安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角（corners）、齐刘海（sen
转载
2024-06-12 14:57:35
618阅读
iOS11 系统发布后,UIView多了几个与安全区域相关的属性和方法,用于界面适配,如:safeAreaInsets、safeAreaLayoutGuide、insetsLayoutMarginsFromSafeArea,以及safeAreaInsetsDidChange方法,初看到这些时我眼花缭乱,不知其存在的意义何在.扪参历井仰胁息，以手抚膺坐长叹.这特么到底怎么用啊???经过不懈的努力,阅
转载
2023-10-01 16:14:40
1513阅读
防火墙安全区域及安全策略配置 一、学习目的掌握防火墙安全区域的配置方法掌握安全策略的配置方法 二、拓扑图 三、场景你是公司的网络管理员。公司总部的网络分成了三个区域，包括内部区域（trust),外部区域（untrust）和服务器区域（DMZ）。你设计通过防火墙来实现对数据的控制，确保公司内部网络安全，并通过DMZ区域对外
转载
2023-07-14 20:54:27
273阅读
一. 前言本文的出发点是对iOS设备的适配, 我们之前的适配只是考虑设备的尺寸, 设备的方向, 而在iPhoneX出来之后呢, 我们又多了一种考量, 那就是刘海和底部横条(HomeIndicator), 我们通过UIKit11.0之后新增的API来解决这个问题, 达到不同设备尺寸, 不同设备方向的完美适配. 二. 之前的做法 注: 该方法只适用于设备的竖屏, 如果是横屏就会出现
转载
2023-09-13 22:30:46
336阅读
示例：iPhoneX 取消了物理按键，改成底部小黑条，这一改动导致网页出现了比较尴尬的屏幕适配问题。一、什么是安全区域？最近正在开发小程序相关的需求时，遇到了一个问题——ios高版本的安全区域，即iPhoneX及以上拥有的“刘海儿”等可滑动区域会与你开发的内容重合。幸运的是，在小程序上我们只需要考虑底部的底部Home Indicator上滑指示条。注意，官方不推荐我们粗暴的将这段区域永久的覆盖，例
转载
2023-07-31 23:51:51
937阅读
安全区域？安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角（corners）、齐刘海（sensor housing）、小黑条（Home Indicator）影响，如下图蓝色区域：也就是说，我们要做好适配，必须保证页面可视、可操作区域是在安全区域内。 更详细说明，参考文档：Human Interface Guidelines - iPhoneXviewport-fitiOS11 新增特性，
转载
2023-10-17 10:28:42
238阅读
对于 iPhone 8 和以往的 iPhone，由于屏幕规规整整的矩形，安全区就是整块屏幕。但自从苹果手机 iphoneX 发布之后，前端人员在开发移动端Web页面时，得多注意一个对 IOS 所谓安全区域范围的适配。这其实说白了就是 iphoneX 之后的苹果手机，在页面上，你需要对顶部和底部多预留一点空间。造成这个问题的主要原因就是苹果手机在屏幕上出现了所谓的刘海屏，而且更是在屏幕下方加了一条小
转载
2023-08-17 16:30:33
485阅读
前言自从iphoneX问世之后，因为iphoneX、iphoneXR和后续全面屏手机设备，因为物理Home键被底部小黑条代替了，这时候很多前端小伙伴在开发的过程都会遇到 “全面屏”和“非全面屏”的兼容性问题，普遍问题就是底部按钮或者选项卡与底部黑线重叠解释根据官方解释：
安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角(corners)、齐刘海(sensor housing)、小黑
转载
2023-10-01 16:14:35
620阅读
iPhoneX安全区域引发的问题(Safe Area)瞧一瞧LeetCode题解：Gitbook版本传送门
前端笔记：Gitbook传送门
目录什么是安全区域？预留出Home Indicator指示条简单总结一、什么是安全区域？最近正在开发小程序相关的需求时，遇到了一个问题——ios高版本的安全区域，即iPhoneX及以上拥有的“刘海儿”等可滑动区域会与你开发的内容重合。 幸运的是，在小程序上我们
转载
2023-10-02 10:56:54
513阅读
一. 前言：苹果手机从iphoneX之后，屏幕顶部都有一个齐刘海，iPhoneX 取消了物理按键，改成底部小黑条，如果不做适配，这些地方就会被遮挡，所以本文记录一下齐刘海与底部小黑条的适配方法。二. 知识点学习1）viewport-fit iOS11 新增特性，苹果公司为了适配 iPhoneX 对现有 viewport meta 标签的一个扩展，用于设置网页在可视窗口的布局方式，可设置三个值：co
转载
2023-12-07 13:25:00
382阅读
过去，我们拿到的手机是方方正正的矩形，所以整个屏幕都可以看做是安全区域 Safe Area，而如今由于 iPhone X 及以上机型，屏幕上的“刘海”以及屏幕四周采用圆角的设计，对于开发者和设计师来说，这个刘海带给他们的是更多的麻烦。比如黄颜色的部分表示网页遮挡了，用户不可见的地方。iPhoneX 及以上机型取消了物理按键，改成底部小黑条，对于网页而言，顶部（刘海部位）的适配问题浏览器已经做了处理
转载
2023-10-29 08:23:15
480阅读
# JavaScript获取安卓水滴屏安全区域的科普
随着智能手机设计的不断进化，尤其是近年来流行的水滴屏和全面屏设计，开发者在进行网页和应用开发时，必须充分考虑这些设备的特殊显示区域。尤其是在安卓设备中，水滴屏可能会影响到内容的显示效果。因此，掌握如何获取这些设备的安全区域成为了前端开发者们非常重要的一环。
## 什么是安全区域？
安全区域是指屏幕上不应被内容遮挡的区域。在水滴屏设备上，水
原创
2024-09-09 07:53:26
170阅读
iPhone X及以上机型底部存在底部指示条，指示条的操作区域与页面底部存在重合，容易导致用户误操作， 解决方案：一、在index.html中的head中添加如下代码<!-- 在 head 标签中添加 meta 标签，并设置 viewport-fit=cover 值 -->
<meta
name="viewport"
content="width=d
转载
2023-07-24 23:27:15
499阅读
前言车载电子逐步采用触摸按键面板(图1)替代传统的物理按键面板(图2)，而性价比最好的当属电容式感应触摸薄膜。电容式感应触摸薄膜能够穿透绝缘材料（玻璃、塑料等）外壳 8mm以上，可以准确无误地侦测到手指的有效触摸区域。还保证了产品的灵敏度、稳定性、可靠性等，不会因环境条件的改变或长期使用而发生变化，并具有防水和强抗干扰能力，超强防护，超强适应温度范围等优点。电容触摸薄膜结构如图3。 &
