ios适配虚拟home键

在H5开发过程中遇到一个兼容性问题。iphone手机的虚拟home键会对屏幕底部的内容造成遮挡。要处理此问题,需要清楚安全区域这个概念。

安全区域

根据刘海和虚拟Home键,Apple为其设备提供了屏幕安全区域的视觉规范

  • 竖屏:竖屏的时候,顶部往下44pt,底部往上34pt,中间部分是安全区域。
  • 横屏:而横屏时候则相对复杂一些,因为虚拟指示条通常情况下都是出现在屏幕底部,所以不仅屏幕左右会留出 44pt 的空白位置,屏幕底部也会留出 21pt 的位置。
    在这里插入图片描述

配置方案

在ios11中我们可以采用view-fit=‘cover’ + safe-area-inset-* 来解决此兼容问题。

关于viewport-fit

viewport-fit 可以设置可视视窗的大小,它有三个属性值:

  • Auto:默认值。这个值不影响初始布局视窗,整个 Web 页面是可视的,与Contain表现一致。
  • Contain:最初的布局视窗和视觉布局视窗被设置为最大的矩形(左图)。
  • Cover:初始布局视窗和视觉布局视窗被设置为设备物理屏幕的限定矩形(右图)。
  • 在这里插入图片描述

关于safe-area-inset-*

各种 iPhone x 都是不规则形状,我们如何控制页面元素到安全区域呢?Apple 把安全区域的位置通过 css 属性提供给了开发者,它们可以通过CSS的constant( )函数来完成:

  • constant(safe-area-inset-top):在Viewport顶部的安全区域内设置量(CSS像素)
  • constant(safe-area-inset-bottom):在Viewport底部的安全区域内设置量(CSS像素)
  • constant(safe-area-inset-left):在Viewport左边的安全区域内设置量(CSS像素)
  • constant(safe-area-inset-right):在Viewport右边的安全区域内设置量(CSS像素)

简单来说我们可以通过 constant( ) 可以获取到非安全边距,再结合 padding 或 margin 来控制页面元素避开非安全区域。 Webkit 在 iOS11 中新增 CSS Functions: env( ) 替代 constant( ),文档中推荐使用 env( ),而 constant( ) 从 Safari Techology Preview 41 和 iOS11.2 Beta 开始会被弃用。在不支持 env( ) 的浏览器中,会自动忽略这一样式规则,不影响网页正常的渲染。为了达到最大兼容目的,我们可以 constant( ) 和 env( ) 同时使用。

.footerClass {padding-bottom: constant(safe-area-inset-bottom); /* iOS 11.0 */padding-bottom: env(safe-area-inset-bottom); /* iOS 11.2 */
}

解决

1.设置网页在可是区域的布局方式

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, minimum-scale=1, maximum-scale=1.0, user-scalable=0">

2.让主题内容控制在安全区域内

body {padding-top: env(safe-area-inset-top);padding-right: env(safe-area-inset-right);padding-bottom: 50px;  /* 兼容不支持 env( ) 的设备  */padding-bottom: calc(env(safe-area-inset-bottom) + 50px); /* 在 iphone x + 中本句才会生效 */padding-left: env(safe-area-inset-left);
}

参考:https://juejin.cn/post/6963941148163473445

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/637949.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

UE5 C++学习笔记 常用宏的再次理解

1.随意创建一个类&#xff0c;他都有UCLASS()。GENERATED_BODY()这样的默认的宏。 UCLASS() 告知虚幻引擎生成类的反射数据。类必须派生自UObject. &#xff08;告诉引擎我是从远古大帝UObject中&#xff0c;继承而来&#xff0c;我们是一家人&#xff0c;只是我进化了其他功能…

基于asio的httpclient实现

基于Asio实现一个简易的httpclient Asio是C的一个高性能网络编程库&#xff0c;提供了跨平台的网络和底层I/O编程接口&#xff0c;包括tcp&#xff0c;udp等sockets通信&#xff0c;以及异步编程模型。它的设计目标是为C开发者提供一种简单、直接的方式来处理网络通信和并行I/…

矩阵和矩阵如何相乘?

矩阵与矩阵相乘遵循特定的数学规则。为了相乘&#xff0c;第一个矩阵的列数必须等于第二个矩阵的行数。矩阵乘法的结果是一个新矩阵&#xff0c;其行数等于第一个矩阵的行数&#xff0c;列数等于第二个矩阵的列数。矩阵乘法不满足交换律&#xff0c;即 AB≠BA。 例子&#xff…

131. 分割回文串 - 力扣(LeetCode)

问题描述 给你一个字符串 s&#xff0c;请你将 s 分割成一些子串&#xff0c;使每个子串都是 回文串 。返回 s 所有可能的分割方案。 回文串 是正着读和反着读都一样的字符串。 输入示例 s "aab"输出示例 [["a","a","b"],["…

esp32-c-简单应用笔记

目录 1、资料2、创建线程的LED闪烁3、创建线程的读取GPIO输入电平4、使用LEDC实现简单呼吸灯&#xff1a; 1、资料 ESP32 开发环境 Espressif-IDE: https://blog.csdn.net/chuner0425/article/details/123466848 https://blog.csdn.net/bin_zhang1/article/details/129993820?…

Unity 面试篇|(九)操作系统与网络篇 【全面总结 | 持续更新】

目录 1. 客户端与服务器交互方式有几种&#xff1f;2. OSI七层模型有哪些&#xff0c;每一层的作用3. UDP/TCP含义&#xff0c;区别4. TCP/IP协议栈各个层次及分别的功能&#xff1f;5. 写出WWW的几个方法&#xff1f;6. Socket粘包7. Socket的封包、拆包8. Socket 客户端 队列…

数学建模常见算法的通俗理解(2)

目录 6 K-Means&#xff08;K-均值&#xff09;聚类算法&#xff08;无需分割数据即可分类&#xff09; 6.1 粗浅理解 6.2 算法过程 6.2.1 选定质心 6.2.2 分配点 6.2.3 评价 7 KNN算法&#xff08;K近邻算法&#xff09;&#xff08;K个最近的决定方案&#xff09; 7.…

MyBatis中的resultMap:深度解析与实战指南

前言 在Java开发中&#xff0c;数据库操作是至关重要的部分&#xff0c;而MyBatis作为一款优秀的持久层框架&#xff0c;以其灵活和强大的映射能力深受开发者喜爱。其中&#xff0c;<resultMap> 是MyBatis中最核心的元素之一&#xff0c;它提供了自定义SQL查询结果到Jav…

GraphicsMagick 的 OpenCL 开发记录(十一)

<2022-03-26 Sat> 对ImageMagick的number_channels及PixelChannelMap结构体中的channel和offset成员的理解 这个标题有点长&#xff0c;可能文章的内容也有点长&#xff0c;但是思路越来越清晰。先来看PixelChannelMap的结构体定义&#xff1a; typedef struct _Pixel…

【每日一题】按分隔符拆分字符串

文章目录 Tag题目来源解题思路方法一&#xff1a;遍历方法二&#xff1a;getline 写在最后 Tag 【遍历】【getline】【字符串】【2024-01-20】 题目来源 2788. 按分隔符拆分字符串 解题思路 方法一&#xff1a;遍历 思路 分隔符在字符串开始和结束位置时不需要处理。 分隔…

Crow:实现点击下载功能

Crow:设置网站的index.html-CSDN博客 讲述了如何完成一个最简单的网页的路由 很多网页提供了下载功能,怎么实现呢,其实也很简单。 假设网页的目录结构如图 $ tree static static ├── img │ └── goodday.jpg └── index.html //index.html <html> <body&…

专业137总分439东南大学920专业基础综合考研经验电子信息与通信电路系统芯片

我本科是南京信息工程大学&#xff0c;今年报考东南大学信息学院&#xff0c;成功逆袭&#xff0c;专业137&#xff0c;政治69&#xff0c;英语86&#xff0c;数一147&#xff0c;总分439。以下总结了自己的复习心得和经验&#xff0c;希望对大家复习有一点帮助。啰嗦一句&…

C++ :命名空间域

目录 冲突与命名&#xff1a; 举个例子&#xff1a; 全局与局部&#xff1a; 域作用限定符&#xff1a; 命名空间域&#xff1a; 冲突与命名&#xff1a; 在C语言中&#xff0c;我们通常会使用stdlib.h 而stdlib.h 本质上是一个函数的库&#xff0c;在程序中使用的大多数…

Java学习笔记(八)——Lambda表达式

文章目录 Lambda表达式Lambda表达式的省略写法Lambda练习练习1练习2 算法题算法题1 斐波那契数列算法题2 猴子吃桃子算法题3 爬楼梯 Lambda表达式 Lambda表达式是JDK8开始的一种新语法形式。 基本作用&#xff1a;简化函数式接口的匿名内部类的写法。 注意&#xff1a; Lam…

2023年总结我所经历的技术大变革

&#x1f4e2;欢迎点赞 &#xff1a;&#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff0c;赐人玫瑰&#xff0c;手留余香&#xff01;&#x1f4e2;本文作者&#xff1a;由webmote 原创&#x1f4e2;作者格言&#xff1a;新的征程&#xff0c;我们面对的不仅…

STL---Stack和Queue

一、stack的介绍和使用 &#xff08;1&#xff09;介绍 翻译: &#xff08;1&#xff09;stack是一种容器适配器&#xff0c;专门用在具有后进先出操作的上下文环境中&#xff0c;其删除只能从容器的一端进行元素的插入与提取操作。 &#xff08;2&#xff09; stack是作为容器…

STL-deque

双端数组&#xff0c;可以对头端进行插入删除操作 deque与vector区别&#xff1a; vector对于头部的插入删除效率低&#xff0c;数据量越大&#xff0c;效率越低 deque相对而言&#xff0c;对头部的插入删除速度回比vector快 vector访问元素时的速度会比deque快,这和两者内部…

03 OSPF

参考文章 1 初步认识OSPF的大致内容(第三课)-CSDN博客 2

微服务环境搭建:docker+nacos单机

nacos需要连接mysql&#xff0c;持久化相关配置。 1. 部署好mysql后&#xff0c;新建nacos数据库然后初始化nacos脚本 -- -------------------------------------------------------- -- 主机: 192.168.150.101 -- 服务器版本: …

c#调用matlab生成的COM DLL,Matlab GUI程序封装成exe文件并在不安装Matlab的电脑上运行

最近根据需求用Matlab写了一个简单的软件&#xff0c;但需要安装到其他电脑上运行&#xff0c;倒腾了很久最终成功在其他电脑上运行&#xff0c;现将方法共享给大家。安装方法&#xff1a;①程序封装 首先用Matlab写完程序并封装好&#xff08;我用的是Matlab2018b&#xff0c;…