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 ( 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
}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;
}
this is subElement
html5+一屏一区域内容,iPhoneX页面安全区域与内容重叠问题相关推荐
- 选定区域着色html,一种提取html页面选定区域内容的方法
一种提取html页面选定区域内容的方法 [专利摘要]一种提取html页面中选定区域内容的方法.该方法的特征在于,在步骤1中,将html源码转换为元素列表:在步骤2中,针对html源码制定一个分析模板, ...
- js打印页面指定区域内容
2种方式: 一种只支持IE浏览器 另一种支持各类浏览器 <html xmlns="http://www.w3.org/1999/xhtml"> <head> ...
- HTML5全屏页面滚动个人简历模板
简介: HTML5全屏页面滚动个人简历模板,响应式设计,自适应屏幕分辨率,兼容PC端和手机移动端,单页面,多栏目,有工作经验.联系我.技能.关于我等栏目. 网盘下载地址: http://kekewl. ...
- uni-app手机截图页面某区域内容-生成长图方法
uni-app手机截图页面某区域内容-生成长图方法 (来自我的今日头条,都是我的博客) 以下是截图当前页面指定区域的全部内容方法 安卓测试可行,测试机型为华为,ios没有业务需要所以没做,仅供参考,觉 ...
- 宽屏html5网络科技有限公司官网单页面响应式模板
宽屏html5网络科技有限公司官网单页面响应式模板文章目录 项目介绍 主要用途 包含模块 页面浏览 获取方式 项目介绍 本项目主要由html5,css样式,原生js构成的宽屏单页面响应式模板.整体结构 ...
- php获取页面的可视内容高度,网页制作技巧:获取页面可视区域的高度_css
文章简介:获取页面可视区域高度,获取页面高度,获取滚动条滚动上去的页面高度. function getWH(){ var wh = {}; "Height Width".repla ...
- 跨屏html ui,Amaze UI(HTML5 跨屏前端框架) v2.7.2
Amaze UI 2.7.2 更新日志:2016-08-17 JS: Improved #900 处理Modal元素停止冒泡引发的使用不变问题: Improved #901 调整Tabs样式,适应元素 ...
- HTML5全屏浏览器兼容方案
最近一个项目有页面全屏的的需求,搜索了下有HTML5的全屏API可用,不过各浏览器的支持不一样. 标准 webkit Firefox IE Element.requestFullscreen() we ...
- 微博html5版什么手机,搜狐微博推出全新手机HTML5触屏版
近日,搜狐微博全力推出手机微博触屏版(w.sohu.com/m),该版采用最新HTML5技术,全新的视觉设计,让你在网页上享受超越客户端的用户体验. HTML5是一种技术标准,被业界视为未来移动应用的 ...
最新文章
- 软件项目开发流程及配置人员
- MATLAB应用实战系列(五十四)-MATLAB多维度绘图实战应用案例
- arm linux串口控制led,通信程序设计 - Linux下ARM和单片机的串口通信设计
- movielens推荐系统_案例|推荐系统的评估指标
- Unity3D动画面板编辑器状态属性对照表
- 对于最小割的进一步理解
- 使用RPM安装Mysql5.5找不到配置文件My.cnf
- HTTPS TSL/SSL详解
- Python 在线电子零售公司销售数据(Online Retail | Kaggle)关联规则分析(Apriori算法)
- 《惢客创业日记》2019.01.30(周三)一月份的工作总结
- oracle甲骨文账号-用于下载oracle JDK
- 学习率和数据集规模_数据集和数据
- HDU 威威猫系列故事——篮球梦
- CIKM 2022|FwSeqBlock: 一种在序列建模中增强行为表征的方法
- vba更改计算机系统时间,如何设置系统日期,一行VBA编程代码教你学会
- Weka中分类器指标的说明
- 中考英语计算机,中考英语作文模板:计算机 The computer
- 论文解读:SegNeXt: Rethinking Convolutional Attention Design for Semantic Segmentation
- 《Adobe Fireworks CS6中文版经典教程》——第1课 了解工作区1.1熟悉Adobe Fireworks...
- Chrome访问https页面 攻击者可能会试图从 XX.XX.XX.XX 窃取您的信息(例如:密码、通讯内容或信用卡信息)直接键盘敲入这11个字符:thisisunsafe