记录一下在uni-app中使用webview 页面出现刘海问题，查询资料解决iphoneX的“刘海”为相机和其他组件留出了空间，同时在底部也留有可操作区域。那么网站边尴尬了~被限制在了这样的“安全区域”内，两边会出现一道白条。解决的方案是：1、给body添加一个background；2、添加viewport-fit=cover meta标签，使页面占满整个屏幕。<meta name="vie
转载
2024-06-24 05:49:20
250阅读
特别注意：/static/img/back.png tips：防止弹窗遮罩时页面可滚动，在弹窗的外层view标签加上 @touchmove.stop.prevent="" 1、关于自定义导航栏中的刘海屏适配问题：官方提供了一个CSS变量可以直接引用：var(--status-bar-height)该变量自动匹配设备平台状态栏高度此变量可以用calc() 加上其他单位数值来使用具体参数和说
转载
2024-06-09 10:48:59
828阅读
使用原生占位（仅App端支持）mainfest.json 文件 app-plus 节点下配置 safearea"safearea": {
"background": "#CCCCCC",
"bottom": {
"offset": "auto"
}
}不使用原生占位（非App端可以不配置mainfest）mainfest.json 文件
转载
2024-08-07 21:38:52
640阅读
刘海屏顶部安全区|状态栏高度var(–status-bar-height) 此变量在微信小程序环境为固定 25px，在 5+App 里为手机实际状态栏高度。 当设置 “navigationStyle”:“custom” 取消原生导航栏后，由于窗体为沉浸式，占据了状态栏位置。此时可以使用一个高度为 var(–status-bar-height) 的 view 放在页面顶部，避免页面内容出现在状态栏。
转载
2024-04-04 09:31:22
211阅读
苹果在iPhone X上使用了刘海屏并开创了全面屏时代，自此各大手机厂商都在模仿，随着几年的发展，从刘海屏到水滴屏再到挖孔屏、滑盖式全面屏，现在升降全面屏和曲面全面屏也在大规模普及，早已步入了真全面屏时代，反观苹果将刘海屏从2016年延续到了2019年，为何苹果在2019还采用刘海屏设计呢？小编整理了三点原因，大家认可哪一点呢？ 1.保留良好的用户体验 苹果依旧使用刘海屏的原因就是3D结构光，要知
转载
2023-10-02 10:51:48
276阅读
ios适配补充：上面的px单位和我们在web中的px单位虽然一样，但是web所需的px实际为iOS中的pt值，px转pt需要根据设备的ppi(Pixels Per Inch:像素密度进行转换)： px:pixel像素，是屏幕上的显示的基本地，并不是长度单位，这个点可大可小，点小的话就很清晰，我们称之为“分辨率高”，反之就是"分辨率低"，所以像素是一个相对单位。 pt:point准确的说死一个专用印
# 布局刘海屏在Android App中的实现
随着刘海屏手机的流行，开发者需要确保他们的应用程序能够适应这些新型屏幕。本文将为刚入行的小白开发者提供一个全面的指导，帮助他们实现Android App铺满刘海屏的功能。
## 流程步骤
下面是实现应用铺满刘海屏的流程步骤表：
| 步骤 | 描述 |
|------|--
前言iPhone X和IOS 11的发布，不仅在许多技术方面造成了一定的冲击，前端也不可以避免地也受到影响，因为iPhone X刘海的影响，在编写前端页面的时候要做一些处理，下面先提出一些新的概念。iphone介绍iPhone X 无论是在屏幕尺寸、分辨率、甚至是形状上都发生了较大的改变，下面以iPhone 8作为参照物，看看到底iPhone X的适配我们要怎么考虑。我们看看iPhone X尺寸上
转载
2024-01-18 15:39:44
153阅读
在开发iOS应用时，我们常常会遇到“刘海屏”的问题。刘海屏，指的是iphone X及以后的机型，其为全面屏设计留下的黑色区域，因此需要特别处理以确保UI的美观和用户体验。接下来我将详细记录解决iOS XIB刘海屏问题的过程，包括环境准备、集成步骤、配置详解、实战应用、排错指南及性能优化。
## 环境准备
在开始之前，确保你具备以下开发环境。
- **开发平台**: macOS
- **开发工
刘海屏的出现为iOS开发带来了新的挑战和机遇，如何利用“刘海屏 iOS API”来进行适配和优化是开发者需要面对的重要问题。本篇文章将分享目前处理这一问题的思路与方法。
## 背景描述
2017年苹果推出了iPhone X，标志着刘海屏设计的普及。刘海的出现使得UI设计和用户体验面临新的挑战，开发者必须考虑到不同设备的刘海部分在界面布局中的影响。
```mermaid
timeline
关于iPhone X 的适配为了实现更为安全的面部识别，iPhone X正面的全面屏上方有一条刘海，上面集成了红外（深度）摄像头、近距离传感器、环境光传感器、左/上扬声器、麦克风、前置摄像头和一个名为点状投射仪 (Dot projector)的元件。它会投影数千个看不到的点在你脸上，对你的脸绘制一幅三维的深度“脸图”，然后和系统记录的脸图进行比对。对于开发这
转载
2023-11-14 18:53:34
266阅读
北京时间今天凌晨1点，苹果再一次让全世界沸腾。iPhone X 带给我们的最大改变：全屏 Super Retina显示屏。它提供了更多的内容显示空间，同时也营造了更加深入的沉浸感。作为 iOS 开发者，在为强大的 Face ID 和全面屏欣喜的同时，我更担忧“齐刘海”的适配！ 下面结合官方的人机交互指南，来了解下如何设计 App 才能在iPhone X 和其他所有 iOS 设备上都看起
转载
2023-11-09 21:35:51
100阅读
接下来，将有不少品牌推出下半年主打的旗舰机型。
其中，苹果的iPhone系列作为首次推出的5G iPhone受到了不少的关注。但除了5G能力外，新款iPhone的外观设计也令人感到好奇。
以往的消息显示，今年苹果将带来5.4英寸、6.1英寸以及6.7英寸三个尺寸共四款机型。而在推出的新机上，屏幕顶部的刘海设计是否会缩小也是最近一段时间的讨论重点之一。
今天，MacRum
转载
2023-09-14 19:18:38
281阅读
实践开发 1、开发实例准备 鉴于本篇的定位，本文的例子是一个很简单的 程序 ，运行后，程序主窗口会显示一行
欢迎 信息；程序底部会有两个
菜单 ，一个是"关于"，一个是"选项"，"选项"是一个弹出式菜单，上面有两个菜单项"关于"和"退出"。 执行"关于"菜单会显示一个标准的信息对话框；执行"退出"菜单，会首先显示一个消息提示窗口，提醒你是否确认要退出，你可以 选择 "确定"退出本程序，也
关于“iOS 刘海屏宏判断”的问题，特别是在开发过程中，如何识别和适配刘海屏设备（如 iPhone X 及以后的型号）是一个非常重要的课题。最近我针对这个问题进行了全面的整理，希望通过这篇博文分享我的一些思考和经验。
## 环境配置
为了确保项目能够正确判断和适配刘海屏，我们需要进行环境的基本配置。
```mermaid
flowchart TD
A[环境配置] --> B[安装 X
一、前期基础知识储备image话不多说，这么多刘海屏手机今年集中爆发，所以尽管刘海屏不好看，但是还是要适配。2017年苹果X开启了刘海屏时代，2018年集中爆发，纷纷采取刘海屏这一策略来实现全面屏的概念(看36氪中的新闻，明年是5G元年，同时三星推出了折叠屏，未来的手机主流趋势是否会发生改变暂不得而知，但刘海屏不会退出市场，淡出视野这一点是确定的)，所以Android手机对于刘海屏的适配也是比较重
一、解决iphonX白条,网站扩展到整个屏幕网页在iphoneX的浏览器屏幕显示上，默认情况下在头部的2侧会出现白条背景，网站被限制在了一个“安全区域”内，移除白色背景的方法方法一：设置body的背景色：.body{
background-color：#f00;
} 方法二：添加mate属性viewport-fit=cover<meta name="viewport" c
转载
2023-09-17 18:40:23
507阅读
# iOS SDK 判断刘海屏实现指南
## 导言
在开发 iOS 应用程序时，刘海屏（即 iPhone 的刘海屏）已经成为了常见的设计元素。为了适配不同尺寸的 iPhone 设备，开发者需要根据屏幕的特征来调整界面布局。本文将介绍如何使用 iOS SDK 判断设备是否为刘海屏，并提供相应的代码示例。
## 流程概述
以下是判断设备是否为刘海屏的流程概述：
| 步骤 | 描述 |
| ---
原创
2023-09-02 10:08:09
408阅读
前言：Flutter系列的文章我应该会持续更新至少一个月左右，从User Interface(UI)到数据相关（文件、数据库、网络）再到Flutter进阶（平台特定代码编写、测试、插件开发等），欢迎感兴趣的读者持续关注(可以扫描左边栏二维码或者微信搜索”IT工匠“关注微信公众号哦，会同步推送)。摘要本文通过一个简单的例子来逐步为大家介绍如何在Flutter中构建漂亮的布局，通过本文你将会了解到以下
苹果iPhone的Face ID功能自推出起就备受外界关注，虽然对于Face ID与Touch ID的便捷程度争论一直没有停歇，但是喜爱Face ID的用户还是不少的。
然而，在带来Face ID功能的同时，iPhone也带来了用户们不太喜欢的“刘海屏”。
一段时间以来，外界都在猜测苹果什么时候才能缩小或取消刘海设计。然而，苹果却坚定的持续推出这一设计的机型。
而这样
转载
2024-01-28 00:15:43
48阅读
