css适配刘海屏手机

最新推荐文章于 2024-09-20 16:05:22 发布

肖肖肖丽珠

最新推荐文章于 2024-09-20 16:05:22 发布

阅读量1.3k

点赞数 1

分类专栏：兼容性问题

本文链接：https://blog.csdn.net/qq_33769914/article/details/118406952

版权

兼容性问题专栏收录该内容

6 篇文章

订阅专栏

刘海屏的手机会出现的问题。

底部的内容太靠底部边了有的可能还会被截断。底部是固定的fixed定位bottom：0

我们可以在最下面这个元素的外层加个样式

padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */

注意：env() 跟 constant() 需要同时存在，而且顺序不能换

如果只是底部的一个回到顶部的按钮，他也是需要固定在侧边的但是位置不是bottom：0；

可以使用

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

iOS11 新增特性，Webkit 的一个 CSS 函数，用于设定安全区域与边界的距离，有四个预定义的变量：

safe-area-inset-left：安全区域距离左边边界距离
safe-area-inset-right：安全区域距离右边边界距离
safe-area-inset-top：安全区域距离顶部边界距离
safe-area-inset-bottom：安全区域距离底部边界距离

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

肖肖肖丽珠

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

使用 css 适配 iphoneX 刘海屏

小白阿里里的博客

03-30

2496

iphoneX 刘海屏幕导致 h5 页面不能正常的全屏显示了，就需要对页面进行适配，下面就详细说说如何适配。首先上一张适配之前的图：可以看到页面顶部被遮挡，底部贴着最下面 ios11 增加新特性，增加webkit 的 css 函数，css 预定义变量四个预定义变量为设定安全区域和边界的距离，如下: safe-area-inset-left：安全区域距离左边边界距离 safe-area-i...

css 背景图怎么设置自动填充满_前端实现 CSS 适配苹果、安卓刘海屏方案

weixin_40002611的博客

11-23

639

这两天去面试，被考察如何适配刘海屏、异性屏，回来总结了一套方案，以供大家参考。为了演示方便，以下均已 iPhone X 横屏作为例子。安全区其实浏览器已经默认使用了一种方案，在大多数情况下都能处理好异形屏问题，它的实现是基于安全区(safe area)的概念。浏览器在默认情况下，会给页面边缘留空，以适应刘海屏的情况。上图中的橙色区域，就是浏览器留空的边界，而中间部分就是安全区。页面的元素布局、定位...

参与评论您还未登录，请先登录后发表或查看评论

华为刘海屏适配

心境

07-16

2804

背景 刘海屏指的是手机屏幕正上方由于追求极致边框而采用的一种手机解决方案。因形似刘海儿而得名。也有一些其他叫法：挖孔屏、凹口屏等，本文档统一按照刘海屏来命名。市场上已经有越来越多的手机都支持这种屏幕形式。谷歌在安卓P版本中已经提供了统一的适配方案，可是在安卓O版本上如何适配呢？本文将详细介绍华为安卓O版本刘海屏适配方案。使用华为提供的刘海屏SDK进行适配，此方案也会继承到华为安卓P版本手机上...

CSS适配刘海屏的几种方式

BY_xueke的个人空间

06-08

5324

前言前些年的iphone X一出现手机厂商纷纷取消了实体的物理按键，ios取而代之的是底部的一个大横条安卓这边基本上也有不少虚拟按键的厂商就会导致一些比较奇葩的问题出现比如这种的情况的发生，或者说刘海屏，挖孔屏一般来说这种时候，都需要我们前端去进行设备适配。适配之前需要了解的几个新知识安全区域安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角（corners）、齐刘海（sensor housing）、小黑条（Home Indicator）的影响，以及横屏状态下他们的影响。更详

H5 CSS适配手机刘海屏高度

zhangxxxq的博客

06-16

2185

标题栏使用css适配刘海屏高度

css适配iPhone刘海屏机型

Wangdr的博客

03-07

4822

一般情况下iPhoneX适配方法有三种。3.css的媒体查询(建议使用)

iphone刘海屏页面适配方法

10-17

适配刘海屏，主要是确保应用内容不会被刘海区域遮挡或影响用户体验。首先，从布局方面来说，当设计针对iPhone X的页面时，开发者需要了解刘海屏幕的尺寸和形状。iPhone X的刘海区域具体尺寸约为2436x812像素，...

Css实现刘海,纯CSS样式写刘海屏效果

weixin_31528001的博客

08-03

970

1. 效果：2. 代码：刘海？:root {--bg--color: #ed4014;}body {background: var(--bg--color);}.top_bar_div {position: fixed;left: 0;top: 0;width: 100%;height: 50px;background: -webkit-linear-gradient(rgba(62, 231, ...

CSS 适配刘海屏 CSS适配iOS屏幕 ios可视窗口

qq_49279305的博客

10-25

1513

CSS 适配刘海屏 CSS适配iOS屏幕 ios可视窗口

vue 屏幕适配

sally18的博客

08-09

1068

前言项目基础配置使用vue-cli2 生成自适应方案核心：阿里可伸缩布局方案 lib-flexible px转rem: px2rem,它有webpack的loader px2rem 开始先使用vue脚手架初始化一个webpack项目项目初始化好了之后，进入项目中安装 lib-flexible 和 px2rem-loader 安装好了之后还需要在项目的入口文件 main.js里引入 lib-flexible 接下来为了验证lib-flexible是否生效，可以将app...

ios苹果手机position：fixed的兼容性以及无法定位到全局的问题

weixin_53296753的博客

11-29

5382

首先大家知道position：fixed；这个css属性在任何环境下都有可能会被阻断，也就是无法作用于全局。所以要想我们在项目中的遮罩蒙版等作用于整个屏幕，要将其所有的父级元素css中的overflow置为visible，但是这又是不现实的。也就是说，当父级元素中有含上面几个css属性的时候，你写的模态框，透明背景等等，就不能覆盖整个屏幕了。可以试试在父级加入下面的css：那么fixed的范围就是加入这个属性的元素。ios5以上的手机确实兼容了position:fixed，简单粗暴的，用js控制下。

iPhoneX 安全区域 safe-area-inset-*样式不生效

Stavin Li的博客

08-26

6705

iPhoneX 安全区域 safe-area-inset-*样式不生效解决办法：添加 meta name="viewport" 中增加viewport-fit=cover内容 <meta name="viewport" id="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, viewport-fit=cover"> ...

Android webview 69,android-9.0-pie-env(safe-area-inset-top)无法在Android Pie WebView 69上运行

weixin_35562134的博客

05-26

1003

在Chrome 69中引入了对env()常量的支持.虽然我观察到的行为与iOS不同.在iPhone 8屏幕上没有凹口env(安全区域插入顶部)等于20px,而在Moto G屏幕上,没有凹口,它等于0.作为一种解决方法,我正在使用此函数在页面加载时将类设置为正文：/*** Android save-area env variables behave differently from iOS ones...

《safe-area-inset-bottom之兼容问题》

杨晓风迷迭香的记忆

06-01

4562

背景身为技术开发，每天惊喜不断。收到业务方反馈，定位为商城的小程序在个别机型上出现结算条不显示的情况。这个bug处于收益喉咙的位置，zhuo's

uniapp 开发H5中适配底部安全区域不生效的解决方法

inticaler的博客

04-23

2918

uniapp 开发H5中适配底部安全区域不生效的解决方法

Vant 3.* 底部安全区适配部分页面不生效

sinat_31327113的博客

10-12

3039

底部安全区适配 // index.html 增加 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" /> // 全局样式增加 @supports(bottom:env(safe-area-inset-bottom)){ #app{ padding-bottom: co

flutter遇到问题及解决方案

qq_25303213的博客

09-20

1852

iphoneX h5安全区域的问题

shidaping的博客

07-12

6954

因为iphoneX有刘海和虚拟home键，所以便有了安全区的概念。刘海和虚拟home键所在的地方是不安全的，如果上面有内容，可能被遮挡或是不能操作。我们可以使用viewport-fit来解决这个问题。例： <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user...

cocos 屏幕适配 刘海屏

最新发布

03-28

<think>好的，用户现在问的是Cocos的屏幕适配，特别是刘海屏的处理。之前他们问过如何避免前置摄像头，可能是在开发一个需要横屏或者全屏显示的应用，比如游戏或者视频类应用。现在需要适配刘海屏，可能是因为他们的应用在刘海屏手机上显示有问题，比如UI被遮挡或者布局错乱。首先，我得回想一下Cocos Creator的屏幕适配机制。Cocos主要通过Canvas组件和多种适配策略来处理不同屏幕比例，比如FIXED_WIDTH、FIXED_HEIGHT等。刘海屏的问题通常出现在异形屏手机上，比如iPhone X以后的机型，或者一些Android的刘海屏、水滴屏设备。这些设备的屏幕顶部或底部有非矩形的区域，可能导致内容被遮挡。接下来，用户可能需要知道如何在Cocos中检测刘海屏，以及如何调整UI布局避开这些区域。对于iOS，苹果提供了safeArea的概念，可以通过cc.sys.getSafeAreaRect()获取安全区域。Android这边可能需要通过原生接口获取刘海屏的高度，或者使用Cocos提供的适配策略来自动调整。还要考虑不同的设备有不同的刘海设计，比如有的在顶部，有的在左侧或右侧。这时候可能需要动态调整UI的位置，比如将重要的UI元素放置在安全区域内。另外，Cocos的Widget组件和对齐方式可能也需要设置，确保UI能够自适应。用户可能还关心如何测试这些适配效果，是否需要真机测试，或者在模拟器中如何模拟刘海屏的情况。此外，不同版本的Cocos Creator可能有不同的处理方法，需要确认用户使用的版本，但通常建议使用较新的版本，因为它们对刘海屏的支持更好。另外，可能需要提到一些常见的坑，比如在Android上不同厂商对刘海屏的实现不同，导致适配困难，这时候可能需要通过插件或者第三方库来处理。或者，如果用户使用的是Web平台，可能需要使用CSS的env(safe-area-inset-*)属性来适配。最后，要确保回答结构清晰，分步骤讲解，比如先设置适配策略，然后处理安全区域，调整UI布局，最后测试验证。同时，给出代码示例，比如如何获取安全区域，如何设置Widget的对齐方式，以及如何处理不同平台的差异。</think>在Cocos引擎中实现刘海屏适配，需要结合**安全区域计算**和**动态布局调整**。以下是分步骤解决方案： --- ### 一、核心适配原理 1. **异形屏类型** - 顶部刘海（iPhone） - 底部横条（Android手势导航） - 侧边曲面屏（三星等） 2. **关键技术指标** - 安全区域坐标：`cc.sys.getSafeAreaRect()` - 设备像素比：`cc.view.getDevicePixelRatio()` - 分辨率策略：`FIXED_WIDTH`/`FIXED_HEIGHT` --- ### 二、适配实现步骤 #### 1. 基础配置 ```typescript // 设置分辨率策略（推荐FIXED_WIDTH） cc.view.setDesignResolutionSize(720, 1280, cc.ResolutionPolicy.FIXED_WIDTH); ``` #### 2. 安全区域计算 ```typescript // 获取安全区域（返回值为{ x, y, width, height }） const safeArea = cc.sys.getSafeAreaRect(); // 转换为Cocos坐标系 const visibleSize = cc.view.getVisibleSize(); const safeAreaTop = visibleSize.height - safeArea.y - safeArea.height; const safeAreaBottom = safeArea.y; ``` #### 3. UI动态适配方案 ```typescript // 顶部导航栏适配示例 const topBar = this.node.getChildByName('TopBar'); topBar.setPosition(0, visibleSize.height - safeAreaTop); topBar.height = safeAreaTop; // 底部按钮适配示例 const bottomBar = this.node.getChildByName('BottomBar'); bottomBar.y = safeAreaBottom; ``` --- ### 三、平台差异处理 | 平台 | 关键处理点 | 代码示例 | |------|------------|----------| | **iOS** | 自动识别安全区域 | 直接使用`getSafeAreaRect()` | | **Android** | 需要处理厂商定制刘海 | ```java // 原生层检测刘海高度 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) { WindowInsets windowInsets = getWindow().getDecorView().getRootWindowInsets(); DisplayCutout cutout = windowInsets.getDisplayCutout(); if (cutout != null) { safeInsetTop = cutout.getSafeInsetTop(); } } ``` | | **Web** | CSS环境变量 | ```css .container { padding-top: env(safe-area-inset-top); } ``` | --- ### 四、高级适配技巧 1. **异形屏图标避让** ```typescript // 检测是否为异形屏 const isNotchScreen = safeAreaTop > 30; // 经验阈值 if (isNotchScreen) { this.statusIcon.y -= 15; // 图标下移 } ``` 2. **横竖屏适配策略** ```typescript cc.view.setResizeCallback(() => { this.updateSafeArea(); // 屏幕旋转时重新计算 }); ``` 3. **编辑器预览** 在Cocos Creator编辑器中： - 通过`预览->模拟异形屏`选择设备模板 - 使用`Ctrl+Shift+F`强制刷新布局 --- ### 五、测试验证方法 | 测试类型 | 验证工具 | 关键指标 | |----------|----------|----------| | iOS真机 | Xcode View Hierarchy | 查看层级是否超出安全区 | | Android | ADB命令 `adb shell dumpsys window displays` | 获取实际insets值 | | 自动化 | Jest + Puppeteer | 截图比对安全区域 | --- ### 六、常见问题解决方案 1. **Web端安全区域失效** 在HTML模板中添加viewport meta： ```html <meta name="viewport" content="viewport-fit=cover"> ``` 2. **Android状态栏重叠** 修改Android主题： ```xml <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item> ``` 3. **Cocos2d-x原生层适配** 通过JNI调用获取系统安全区域： ```cpp #if (CC_TARGET_PLATFORM == CC_PLATFORM_ANDROID) JniHelper::callStaticIntMethod("org/cocos2dx/lib/Cocos2dxHelper", "getSafeInsetTop"); #endif ``` 通过上述方案，可以实现从基础适配到厂商定制的全方位刘海屏兼容。建议在关键UI节点添加动态布局组件，并配合不同分辨率的测试设备进行验证。