CSS 在全屏iphonex(刘海屏)中的适配

2023-10-25 14:10

本文主要是介绍CSS 在全屏iphonex(刘海屏)中的适配,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

iphonex 已经上线有一段时间了,作为业界刘海屏幕第一款机型,导致全屏不能正常的全屏显示了,,所以需要对
iphonx 适配,下面就详细说说如何适配

先看一张适配前后的图:

 

 

iphonex 提供的 meta 头

<meta name="viewport" content="viewport-fit=contain">
<meta name="viewport" content="viewport-fit=cover">
<meta name="viewport" content="viewport-fit=auto">

contain

可视化窗口完全包含网页内容

cover

网页内容完全覆盖

auto

默认值和 contain 一样

详细见下图(无耻盗图):

注意:网页默认不添加扩展的表现是 viewport-fit=contain,需要适配 iPhoneX 必须设置
viewport-fit=cover,这是适配的关键步骤。

ios11 增加新特性,webkit 的 css 函数

为了应对刘海屏幕,苹果也给出了响应的策略

css 预定义变量

四个预定义变量为设定安全区域和边界的距离,如下:

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

safe-area-inset-left

一般情况下是 0

safe-area-inset-right

一般情况下是 0

safe-area-inset-top

在刘海全屏的时候 top 为 44px

safe-area-inset-bottom

刘海全屏的条件下是 34px

css 函数 env() 和 constant()

这两个函数都是 webkit 中 css 函数,可以直接使用变量函数,只有在 webkit 内核下才支持

env 函数

必须在 ios >= 11.2 才支持

constant 函数

必须 ios < 11.2 支持

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-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);

看下图:

兼容代码

下面写的是 scss

.phonex {padding-top: constant(safe-area-inset-top); //为导航栏+状态栏的高度 88pxpadding-top: env(safe-area-inset-top); //为导航栏+状态栏的高度 88pxpadding-left: constant(safe-area-inset-left); //如果未竖屏时为0padding-left: env(safe-area-inset-left); //如果未竖屏时为0padding-right: constant(safe-area-inset-right); //如果未竖屏时为0padding-right: env(safe-area-inset-right); //如果未竖屏时为0padding-bottom: constant(safe-area-inset-bottom); //为底下圆弧的高度 34pxpadding-bottom: env(safe-area-inset-bottom); //为底下圆弧的高度 34px
}

完整检测代码

@supports 隔离兼容模式

@mixin iphonex-css {padding-top: constant(safe-area-inset-top); //为导航栏+状态栏的高度 88pxpadding-top: env(safe-area-inset-top); //为导航栏+状态栏的高度 88pxpadding-left: constant(safe-area-inset-left); //如果未竖屏时为0padding-left: env(safe-area-inset-left); //如果未竖屏时为0padding-right: constant(safe-area-inset-right); //如果未竖屏时为0padding-right: env(safe-area-inset-right); //如果未竖屏时为0padding-bottom: constant(safe-area-inset-bottom); //为底下圆弧的高度 34pxpadding-bottom: env(safe-area-inset-bottom); //为底下圆弧的高度 34px
}
@mixin iphonex-support {@supports (bottom: constant(safe-area-inset-top)) or (bottom: env(safe-area-inset-top)) {body.iphonex {@include iphonex-css;}}
}

使用@media 媒体查询

@mixin iphonex-css {padding-top: constant(safe-area-inset-top); //为导航栏+状态栏的高度 88pxpadding-top: env(safe-area-inset-top); //为导航栏+状态栏的高度 88pxpadding-left: constant(safe-area-inset-left); //如果未竖屏时为0padding-left: env(safe-area-inset-left); //如果未竖屏时为0padding-right: constant(safe-area-inset-right); //如果未竖屏时为0padding-right: env(safe-area-inset-right); //如果未竖屏时为0padding-bottom: constant(safe-area-inset-bottom); //为底下圆弧的高度 34pxpadding-bottom: env(safe-area-inset-bottom); //为底下圆弧的高度 34px
}
// iphonex 适配
@mixin iphonex-media {@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {body.iphonex {@include iphonex-css;}}
}

最后

env 和 constant 只有在 viewport-fit=cover 时候才能生效, 上面使用的safari 的控制台可以检测模拟器中网页开启web inspector.

https://webkit.org/blog/7929/designing-websites-for-iphone-x/?hmsr=funteas.com&utm_medium=funteas.com&utm_source=funteas.com

https://aotu.io/notes/2017/11/27/iphonex/index.html

 

 

 

 

 

这篇关于CSS 在全屏iphonex(刘海屏)中的适配的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/283113

相关文章

Python将博客内容html导出为Markdown格式

《Python将博客内容html导出为Markdown格式》Python将博客内容html导出为Markdown格式,通过博客url地址抓取文章,分析并提取出文章标题和内容,将内容构建成html,再转... 目录一、为什么要搞?二、准备如何搞?三、说搞咱就搞!抓取文章提取内容构建html转存markdown

在React中引入Tailwind CSS的完整指南

《在React中引入TailwindCSS的完整指南》在现代前端开发中,使用UI库可以显著提高开发效率,TailwindCSS是一个功能类优先的CSS框架,本文将详细介绍如何在Reac... 目录前言一、Tailwind css 简介二、创建 React 项目使用 Create React App 创建项目

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》:本文主要介绍了CSS中的`vertical-align`和`line-height`属性,包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案,详细内容请阅读本文,希望能对你有所帮助... 目录vertical-ali

浅析CSS 中z - index属性的作用及在什么情况下会失效

《浅析CSS中z-index属性的作用及在什么情况下会失效》z-index属性用于控制元素的堆叠顺序,值越大,元素越显示在上层,它需要元素具有定位属性(如relative、absolute、fi... 目录1. z-index 属性的作用2. z-index 失效的情况2.1 元素没有定位属性2.2 元素处

Python实现html转png的完美方案介绍

《Python实现html转png的完美方案介绍》这篇文章主要为大家详细介绍了如何使用Python实现html转png功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 1.增强稳定性与错误处理建议使用三层异常捕获结构:try: with sync_playwright(

Vue 调用摄像头扫描条码功能实现代码

《Vue调用摄像头扫描条码功能实现代码》本文介绍了如何使用Vue.js和jsQR库来实现调用摄像头并扫描条码的功能,通过安装依赖、获取摄像头视频流、解析条码等步骤,实现了从开始扫描到停止扫描的完整流... 目录实现步骤:代码实现1. 安装依赖2. vue 页面代码功能说明注意事项以下是一个基于 Vue.js

CSS @media print 使用详解

《CSS@mediaprint使用详解》:本文主要介绍了CSS中的打印媒体查询@mediaprint包括基本语法、常见使用场景和代码示例,如隐藏非必要元素、调整字体和颜色、处理链接的URL显示、分页控制、调整边距和背景等,还提供了测试方法和关键注意事项,并分享了进阶技巧,详细内容请阅读本文,希望能对你有所帮助...

Nginx实现前端灰度发布

《Nginx实现前端灰度发布》灰度发布是一种重要的策略,它允许我们在不影响所有用户的情况下,逐步推出新功能或更新,通过灰度发布,我们可以测试新版本的稳定性和性能,下面就来介绍一下前端灰度发布的使用,感... 目录前言一、基于权重的流量分配二、基于 Cookie 的分流三、基于请求头的分流四、基于请求参数的分