html 适配iphonex,有关HTML5页面在iPhoneX适配问题
这次给大家带来有关HTML5页面在iPhoneX适配问题,有关HTML5页面在iPhoneX适配的注意事项有哪些,下面就是实战案例,一起来看一下。
1. iPhoneX的介绍
屏幕尺寸
倍图其实就是像素尺寸和开发尺寸的倍率关系,但这只是外在的表现。倍图核心的影响因素在于PPI(DPI),了解屏幕密度与各尺寸的关系有助于我们深度理解倍率的概念:《基础知识学起来!为设计师量身打造的DPI指南》
iPhone8在本次升级中,屏幕尺寸和分辨率都遗传了iPhone6以后的优良传统;
然而iPhone X 无论是在屏幕尺寸、分辨率、甚至是形状上都发生了较大的改变,下面以iPhone 8作为参照物,看看到底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;
}
相信看了这些案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
相关阅读:
html 适配iphonex,有关HTML5页面在iPhoneX适配问题相关推荐
- 苹果状态栏HTML,有关HTML5页面在iPhoneX适配问题
1. iPhoneX的介绍 屏幕尺寸 我们熟知的iPhone系列开发尺寸概要如下: △ iPhone各机型的开发尺寸 转化成我们熟知的像素尺寸: △ 每个机型的多维度尺寸 倍图其实就是像素尺寸和开 ...
- 有关HTML5页面在iPhoneX适配问题
这篇文章主要介绍了有关HTML5页面在iPhoneX适配问题,需要的朋友可以参考下 1. iPhoneX的介绍 屏幕尺寸 我们熟知的iPhone系列开发尺寸概要如下: △ iPhone各机型的开发 ...
- vue移动端html5页面根据屏幕适配的四种解决方法
最近做了两个关于h5页面对接公众号的项目,不得不提打开微信浏览器内置地图导航的功能确实有点恶心.下次想起来了的话,进行总结分享一下如何处理.在vue移动端h5页面当中,其中适配是经常会遇到的问题,这块 ...
- wkwebview html5页面,WKWebView:适配H5页面的显示尺寸
一般的同样的html代码,在UIWebView和WKWebView中显示效果是不一样的.例如 test_input 显示效果: 可以看出两者有明显的区别. 那么如何适配呢?有两个方法(本质上是一个). ...
- 关于H5页面在iPhoneX刘海屏适配(转)
关于H5页面在iPhoneX适配 1. iPhoneX的介绍 屏幕尺寸 我们熟知的iPhone系列开发尺寸概要如下: △ iPhone各机型的开发尺寸 转化成我们熟知的像素尺寸: △ 每个机型的多 ...
- 关于H5页面在iPhoneX适配(转)
1. iPhoneX的介绍 屏幕尺寸 我们熟知的iPhone系列开发尺寸概要如下: △ iPhone各机型的开发尺寸 转化成我们熟知的像素尺寸: △ 每个机型的多维度尺寸 倍图其实就是像素尺寸和开 ...
- H5页面在iPhoneX适配
1. iPhoneX的介绍 屏幕尺寸 我们熟知的iPhone系列开发尺寸概要如下: △ iPhone各机型的开发尺寸 转化成我们熟知的像素尺寸: △ 每个机型的多维度尺寸 倍图其实就是像素尺寸和开 ...
- 微信小程序iPhoneX 底部虚拟Home键区域适配方案
微信小程序iPhoneX 底部虚拟Home键区域适配方案 为什么要适配? 先看下iPhoneX和之前的iPhone的区别,如下图 可以看出主要是顶部和底部多了一些区域,如果页面内容进入该区域,有可能会 ...
- iphonex中全屏h5的适配
iphonex 已经上线有一段时间了,作为业界刘海屏幕第一款机型,导致全屏不能正常的全屏显示了,,所以需要对 iphonx 适配,下面就详细说说如何适配 先看一张适配前后的图: iphonex 提供的 ...
最新文章
- mac tomcat https
- 第k大的数python代码_【Python】【输出前m大的数】
- Tizen SDK 1.0 Larkspur 安装指南(ubuntu)
- kalman滤波从应用到推导
- TouTiao开源项目 分析笔记9 实现一个问答主页面
- 【转载】WinCE中串口驱动及接口函数介绍
- 硬币 假硬币 天平_小东西叫硬币
- 开机的时候重新设置密linux管理员的密码
- 【OJ8462】大盗阿福
- sql错误索引中丢失_收集,汇总和分析丢失SQL Server索引统计信息
- nodejs template
- 有序数组转换为二叉搜索树
- linux与unix的区别_Linux与Unix
- 力扣-1128 等价多米诺骨牌对的数量
- 模拟Get、Post请求
- Python游戏编程(五)Tic Tac Toe
- 安装了yarn还是有 The project seems to require yarn but it‘s not installed
- python编程好学吗-零基础可以学会python吗?python好学吗?
- live两种读音[liv][laiv]含义上的区别
- 回溯算法--LeetCode-78 子集、LeetCode-90 子集Ⅱ
热门文章
- Psychopy3:import of pyglet halted; None in sys.modules
- FFmpeg读取远程摄像头视频并用opencv显示
- 学习网学籍报告过期了,没有重新申请的入口怎么办?
- VMware Workstation——虚拟机更换磁盘文件路径的方法总结
- spring的冷门知识
- Plugin ‘org.apache.tomcat.maven:tomcat7-maven-plugin:2.2‘ not found
- 二叉树的Morris遍历:先序遍历和中序遍历
- 快手:回文字符串(Python语言实现)
- 【MySQL】MySQL的存储引擎和索引详解(聚集索引和非聚集索引)
- 微信公众号支付 php7,微信公众号支付(PHP完全版)