移动端页面如何兼容iphone底部的安全区域

正常情况下，当页面充满屏幕时，部分iphone底部黑条会遮挡页面内容（安卓手机上不存在这个问题）如下图：

但是其实我们想要实现的效果是这样的，不想让它遮挡内容：

这个要怎么兼容呢？

1、在样式中加入

padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);

2、在html的meta中加入viewport-fit=cover，小程序里的viewport-fit默认是cover

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

补充知识：

1、env()和constant()，是IOS11新增的特性，Webkit的css函数，用于设定安全区域与边界的距离，有4个预定义变量：

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

2、viewport-fit

contain: 可视窗口完全包含网页内容
cover：网页内容完全覆盖可视窗口

默认情况下或者设置为 auto和 contain效果相同。

移动端页面如何兼容iphone底部的安全区域相关推荐

oracle里子连接查询,pc端页面滚动到底部加载更多数据......
场景:pc端页面鼠标滚动到底部时,通过ajax加载更多的数据,实现分页功能,封装成了一个函数,自己根据实际情况调用即可. 说明:discussList是放加载内容的div容器 // 加载更多评价的函数 ...
vant 软键盘_移动端页面输入底部被软键盘遮挡问题
概述近期有个移动端页面的项目,存在需要用户输入的表单信息.因为页面不存在滑动(通过overflow设为hidden的方式),所以在点击input标签输入信息时,在安卓机下键盘会遮挡页面底部内容,当点 ...
静态html页面如何兼容pc和移动端
静态html页面如何兼容pc和移动端在"test.html"文件中的head之间,录入如下代码: <meta name="viewport" conte ...
h5 解决ios端输入框失去焦点后页面不回弹或者底部留白问题
h5 解决ios端输入框失去焦点后页面不回弹或者底部留白问题参考文章: (1)h5 解决ios端输入框失去焦点后页面不回弹或者底部留白问题 (2)https://www.cnblogs.com/bl ...
移动端也能兼容的web页面制作2：导航栏、背景图片设置
[ 导读 ] MDBootstrap 是基于 Vue.js 开发的一套前端框架,拥有美观大气的界面效果,友好的交互体验,更棒的是对于移动端也有很好的兼容性.先给大家看下演示 demo 的运行,后面将围 ...
【移动端网页布局】移动端网页布局基础概念 ⑧ ( 移动端页面布局方案 | 单独制作的移动端页面 - 主流 | 响应式页面兼容移动端 - 开发难度较大 )
文章目录一.移动端页面布局方案 1.单独制作的移动端页面 2.响应式页面兼容移动端一.移动端页面布局方案移动端页面方案 : 单独制作的移动端页面 : 主流开发方案 , PC 端与移动端访问 ...
二倍图（物理像素物理像素比，多倍图，背景缩放），移动端开发选择（移动端主流方案【单独制作移动端页面（主流），响应式页面兼容移动端（其次）】，移动端技术解决方案【移动端浏览器，特殊样式】）
二倍图物理像素&物理像素比物理像素指的是屏幕显示的最小颗粒,是物理真实存在的,我们开发的1px不一定等于1个物理像素,(PC端相同,移动端不一定相同) PC端和早期手机屏幕是 1CSS像素 ...
移动端软键盘兼容方案
转自:https://segmentfault.com/a/1190000018959389 前言最近一段时间在做 H5 聊天项目,踩过其中一大坑:输入框获取焦点,软键盘弹起,要求输入框吸附(或顶) ...
【移动端 Web】怎么循序渐进地开发一个移动端页面
1. 移动页面开发基础 1.1 像素--什么是像素像素是 Web 页面布局的基础,那么到底什么才是一个像素呢? 像素:一个像素就是计算机屏幕所能显示一种特定颜色的最小区域.这是像素的概念,实际上,W ...

移动端页面如何兼容iphone底部的安全区域

正常情况下，当页面充满屏幕时，部分iphone底部黑条会遮挡页面内容（安卓手机上不存在这个问题）如下图：

但是其实我们想要实现的效果是这样的，不想让它遮挡内容：

这个要怎么兼容呢？

补充知识：

1、env()和constant()，是IOS11新增的特性，Webkit的css函数，用于设定安全区域与边界的距离，有4个预定义变量：

2、viewport-fit

移动端页面如何兼容iphone底部的安全区域相关推荐

最新文章

热门文章