苹果状态栏HTML,有关HTML5页面在iPhoneX适配问题
1. iPhoneX的介绍
屏幕尺寸
我们熟知的iPhone系列开发尺寸概要如下:
△ iPhone各机型的开发尺寸
转化成我们熟知的像素尺寸:
△ 每个机型的多维度尺寸
倍图其实就是像素尺寸和开发尺寸的倍率关系,但这只是外在的表现。倍图核心的影响因素在于PPI(DPI),了解屏幕密度与各尺寸的关系有助于我们深度理解倍率的概念:《基础知识学起来!为设计师量身打造的DPI指南》
iPhone8在本次升级中,屏幕尺寸和分辨率都遗传了iPhone6以后的优良传统;
然而iPhone X 无论是在屏幕尺寸、分辨率、甚至是形状上都发生了较大的改变,下面以iPhone 8作为参照物,看看到底iPhone X的适配我们要怎么考虑。
我们看看iPhone X尺寸上的变化:
2. iPhoneX的适配---安全区域(safe area)
苹果对于 iPhone X 的设计布局意见如下:
核心内容应该处于 Safe area 确保不会被设备圆角(corners),传感器外壳(sensor housing,齐刘海) 以及底部的 Home Indicator 遮挡。也就是说 我们设计显示的内容应该尽可能的在安全区域内;
3. iPhoneX的适配---适配方案viewport-fit 3.1 PhoneX的适配,在iOS 11中采用了viewport-fit的meta标签作为适配方案;viewport-fit的默认值是auto。
viewport-fit取值如下:
auto
默认:viewprot-fit:contain;页面内容显示在safe area内
cover
viewport-fit:cover,页面内容充满屏幕
viewport-fit meta标签设置(cover时)
3.2 css constant()函数 与safe-area-inset-top &safe-area-inset-left &safe-area-inset-right &safe-area-inset-bottom的介绍
如上图所示 在iOS 11中的WebKit包含了一个新的CSS函数constant(),以及一组四个预定义的常量:safe-area-inset-left,safe-area-inset-right,safe-area-inset-top和safe-area-inset-bottom。当合并一起使用时,允许样式引用每个方面的安全区域的大小。
3.1当我们设置viewport-fit:contain,也就是默认的时候时;设置safe-area-inset-left,safe-area-inset-right,safe-area-inset-top和safe-area-inset-bottom等参数时不起作用的。
3.2当我们设置viewport-fit:cover时:设置如下
body {
padding-top: constant(safe-area-inset-top); //为导航栏+状态栏的高度 88px
padding-left: constant(safe-area-inset-left); //如果未竖屏时为0
padding-right: constant(safe-area-inset-right); //如果未竖屏时为0
padding-bottom: constant(safe-area-inset-bottom);//为底下圆弧的高度 34px
}
4. iPhoneX的适配---高度统计
viewport-fit:cover + 导航栏
5.iPhoneX的适配---媒体查询
注意这里采用的是690px(safe area高度),不是812px;
@media only screen and (width: 375px) and (height: 690px){
body {
background: blue;
}
}
6.iphoneX viewport-fit
问题总结
1.关于iphoneX 页面使用了渐变色时;如果viewport-fit:cover;
1.1在设置了背景色单色和渐变色的区别,如果是单色时会填充整个屏幕,如果设置了渐变色 那么只会更加子元素的高度去渲染;而且页面的高度只有690px高度,上面使用了padding-top:88px;
body固定为:
1.单色时:
* {
padding: 0;
margin: 0;
}
body {
background:green;
padding-top: constant(safe-area-inset-top); //88px
/*padding-left: constant(safe-area-inset-left);*/
/*padding-right: constant(safe-area-inset-right);*/
/*padding-bottom: constant(safe-area-inset-bottom);*/
}
2.渐变色
* {
padding: 0;
margin: 0;
}
body {
background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ffd54f), to(#ffaa22));
padding-top: constant(safe-area-inset-top); //88px
/*padding-left: constant(safe-area-inset-left);*/
/*padding-right: constant(safe-area-inset-right);*/
/*padding-bottom: constant(safe-area-inset-bottom);*/
}
解决使用渐变色 仍旧填充整个屏幕的方法;CSS设置如下
Designing Websites for iPhone X: Respecting the safe areas
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
body {
padding-top: constant(safe-area-inset-top);
padding-left: constant(safe-area-inset-left);
padding-right: constant(safe-area-inset-right);
padding-bottom: constant(safe-area-inset-bottom);
}
.content {
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffd54f), to(#ffaa22));
width: 100%;
height: 724px;
}
2.页面元素使用了固定定位的适配即:{position:fixed;}
2.1 子元素页面固定在底部时;使用viewport-fit:contain时;可以看到bottom:0时只会显示在安全区域内;
Designing Websites for iPhone X: Respecting the safe areas
* {
padding: 0;
margin: 0;
}
/*html,body {*/
/*height: 100%;*/
/*}*/
body {
background: grey;
/*padding-top: constant(safe-area-inset-top);*/
/*padding-left: constant(safe-area-inset-left);*/
/*padding-right: constant(safe-area-inset-right);*/
/*padding-bottom: constant(safe-area-inset-bottom);*/
}
.top {
width: 100%;
height: 44px;
background: purple;
}
.bottom {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 44px;
color: black;
background: green;
}
2.1 子元素页面固定在底部时;使用viewport-fit:cover时;可以看到bottom:0时只会显示在安全区域内;
添加html,body {width:100%;heigth:100%}
图1:
* {
padding: 0;
margin: 0;
}
html,body {
height: 100%;
}
body {
background: grey;
padding-top: constant(safe-area-inset-top);
padding-left: constant(safe-area-inset-left);
padding-right: constant(safe-area-inset-right);
padding-bottom: constant(safe-area-inset-bottom);
}
.top {
width: 100%;
height: 44px;
background: purple;
}
.bottom {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 44px;
color: black;
background: green;
}
图2:
* {
padding: 0;
margin: 0;
}
html,body {
height: 100%;
}
body {
background: grey;
padding-top: constant(safe-area-inset-top);
padding-left: constant(safe-area-inset-left);
padding-right: constant(safe-area-inset-right);
/*padding-bottom: constant(safe-area-inset-bottom);*/
}
.top {
width: 100%;
height: 44px;
background: purple;
}
.bottom {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 44px;
color: black;
background: green;
}
2.3 关于alertView弹框 遮罩层的解决方案
alertView
document.documentElement.style.fontSize = window.screen.width / 7.5 + 'px';
* {
margin: 0;
padding: 0;
}
html,body {
width: 100%;
height: 100%;
}
body {
font-size: 0.32rem;
padding-top: constant(safe-area-inset-top);
padding-left: constant(safe-area-inset-left);
padding-right: constant(safe-area-inset-right);
padding-bottom: constant(safe-area-inset-bottom);
}
.content {
text-align: center;
}
.testBut {
margin: 50px auto;
width: 100px;
height: 44px;
border: 1px solid darkgray;
outline:none;
user-select: none;
background-color: yellow;
}
弹框加载
function showLoading() {
UIAlertView.show({
type:"input",
title:"温馨提示", //标题
content:"VIP会员即将到期", //获取新的
isKnow:false
});
var xx = new UIAlertView();
console.log(xx);
}
总结
以上所述是小编给大家介绍的有关HTML5页面在iPhoneX适配问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
苹果状态栏HTML,有关HTML5页面在iPhoneX适配问题相关推荐
- html 适配iphonex,有关HTML5页面在iPhoneX适配问题
这次给大家带来有关HTML5页面在iPhoneX适配问题,有关HTML5页面在iPhoneX适配的注意事项有哪些,下面就是实战案例,一起来看一下. 1. iPhoneX的介绍 屏幕尺寸 倍图其实就是像 ...
- 有关HTML5页面在iPhoneX适配问题
这篇文章主要介绍了有关HTML5页面在iPhoneX适配问题,需要的朋友可以参考下 1. iPhoneX的介绍 屏幕尺寸 我们熟知的iPhone系列开发尺寸概要如下: △ iPhone各机型的开发 ...
- vue移动端html5页面根据屏幕适配的四种解决方法
最近做了两个关于h5页面对接公众号的项目,不得不提打开微信浏览器内置地图导航的功能确实有点恶心.下次想起来了的话,进行总结分享一下如何处理.在vue移动端h5页面当中,其中适配是经常会遇到的问题,这块 ...
- 关于H5页面在iPhoneX适配(转)
1. iPhoneX的介绍 屏幕尺寸 我们熟知的iPhone系列开发尺寸概要如下: △ iPhone各机型的开发尺寸 转化成我们熟知的像素尺寸: △ 每个机型的多维度尺寸 倍图其实就是像素尺寸和开 ...
- H5页面在iPhoneX适配
1. iPhoneX的介绍 屏幕尺寸 我们熟知的iPhone系列开发尺寸概要如下: △ iPhone各机型的开发尺寸 转化成我们熟知的像素尺寸: △ 每个机型的多维度尺寸 倍图其实就是像素尺寸和开 ...
- wkwebview html5页面,WKWebView:适配H5页面的显示尺寸
一般的同样的html代码,在UIWebView和WKWebView中显示效果是不一样的.例如 test_input 显示效果: 可以看出两者有明显的区别. 那么如何适配呢?有两个方法(本质上是一个). ...
- 关于H5页面在iPhoneX刘海屏适配(转)
关于H5页面在iPhoneX适配 1. iPhoneX的介绍 屏幕尺寸 我们熟知的iPhone系列开发尺寸概要如下: △ iPhone各机型的开发尺寸 转化成我们熟知的像素尺寸: △ 每个机型的多 ...
- H5中 iphoneX适配
关于H5页面在iPhoneX适配 1. iPhoneX的介绍 屏幕尺寸 我们熟知的iPhone系列开发尺寸概要如下: △ iPhone各机型的开发尺寸 转化成我们熟知的像素尺寸: △ 每个机型的多 ...
- iPhoneX 适配方案
绝对长度单位 英寸 厘米 毫米 磅 pc inch cm mm pt pica 相对长度单位 是网页设计中使用最多的长度单位,包括px.em.rem等 屏幕尺寸 指屏幕的对角线的长度,单位是英寸,1英 ...
最新文章
- flex vue 垂直居中居上_移动开发-flex 布局
- asp.net web常用控件FileUpload(文件上传控件)
- 金志文机器人歌叫什么_MIR发布《移动机器人部署安全指南》白皮书
- Jetson Nano设置开机启动程序
- 在Windows本地安装ElasticSearch和Kibana
- 绕过AppLocker系列之MSIEXEC的利用
- python去除字符串中的单词_从字符串中删除特定单词的最有效方法
- linux bam文件格式介绍,Sam和bam文件说明
- 阿里云ECS服务器搭建Mysql数据库
- 病毒木马查杀实战第013篇:一个基于.NET的“敲竹杠”病毒研究
- 牛客算法周周练11 A.切题之路 签到题
- python音频加速_python将音频进行变速的操作方法
- (SSM解析错误)$%7BpageContext.request.contextPath%7D/account/save
- [HDU1512]Monkey King(可并堆)
- CentOS镜像介绍及下载
- 第四章案例研究--------------------- 基于业务驱动的企业安全架构(翻译,原作者John Sherwood ;Andrew Clark; David Lynas)---仅学习使用
- 对当前网上公开的聊天对话机器人语料整理
- 从身份证号提取出生日期
- 端口映射工具 porttunnel
- 漏洞深度分析|CVE-2022-1471 SnakeYaml 命令执行漏洞
热门文章
- Redis之时间轮机制(五)
- 移动应用安全之沙盒技术
- 实验五 类和对象-3 zxt
- 使用 28x28 bmp測試訓練後的模型 tensorflow mnist jupyter notebook
- java判断访问设备类型
- 用VSCode打开带图片的.md文件
- python编写程序判断今天是今年的第几天_python怎么判断当前日期是今年的第几天...
- python ipados_macOS Big Sur 正式发布并已开放下载,支持原生运行 iOS 和 iPadOS App
- 启明星辰潘柱廷:信息安全市场的战国春秋与陆地海洋观
- 计算机音乐本质上,电脑音乐系统的本质特点.doc