iPhone X Web 设计
iPhone X Web 设计
原文地址:https://webkit.org/blog/7929/designing-websites-for-iphone-x/
开箱即用(开发者无需进行任何设置),在iPhone X中,Safari 就可以完美的在全面屏上显示你既有的网站。网页内容会自动插入到显示的安全区域以至于不会被圆角和设备的传感器区域(刘海)遮挡。
插入区域会以在<body>
或者<head>
元素中定义的background-color
为填充,从而与页面的其余部分相融合。对于大多数网站而言,这就足够了。如果你的页面仅仅包含文本和图像以及它们下面的背景颜色,默认的插入方式看起来就不错。
像下面那样的页面,特别是设计了100%屏幕宽度的水平导航条的页面,可以选择进一步去充分利用新屏幕的特性。iPhone X 人机交互指南详细介绍了一些要注意的一般设计原则,UIKit文档也提到了原生应用程序可以采用特定的机制来确保他们看起来不错。你的网站可以使用iOS 11 中新引入的几个WebKit API来充分利用iPhone X 屏幕的特性。
Safari 默认的插入方式。
让内容占据整个屏幕
第一个在 iOS 11 上使用的新功能是viewport-fit
, 它是对现有viewport
标签meta
的扩展,它可以控制内容插入的方式。
viewport-fit
默认为auto
,这将导致上述自动排版行为。你可以将viewport-fit
设置为cover
来禁用该行为并使页面布局到屏幕的完整大小。 代码如下:
<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>
刷新之后,导航栏占据了整个屏幕的宽度,看起来顺眼多了。然而,你会发现页面的一部分被“刘海”遮住了,而且底部的导航条非常难用。这也是为什么我们要重视系统的安全插入区域。
使用viewport-fit=cover
填充整个屏幕
重视安全区域
将viewport-fit=cover
之后,为了使页面可用,我们必须选择性的给重要内容添加内填充以确保她们不会被屏幕的形状(刘海)遮住。这将使得一个页面可以充分利用 iPhone X 上增加的屏幕空间,同时动态调整以避免被角落,传感器外壳(刘海)和用于访问主屏幕的指示器遮住内容。
- iPhone X 横屏下的安全区域和非安全区域,图中的标识为插距(插入距离)常量。*
为了实现上述效果,iOS 11 中的WebKit增加了一个名为constant()
的新 CSS 函数 和四个预定义的常量, 它们分别是safe-area-inset-left
, safe-area-inset-right
, safe-area-inset-top
和safe-area-inset-bottom
。当组合使用时,这允许样式声明引用每侧安全区域的当前大小。
CSS 工作小组最近决定添加这些功能,但名称不太一样,使用时请务必记住这一点。
任何使用var()
地方都可以使用constant()
- 如下面的例子,给padding赋值。
.post {padding: 12px; padding-left: constant(safe-area-inset-left); padding-right: constant(safe-area-inset-right); }
对于不支持constant()
的浏览器,包含它的样式将被忽略,因此在使用constant()
时请务必为每个样式添加 fallback。
重视安全区域,因此重要的的内容才不会被遮挡。
两全其美,max() & min ()
本节介绍 iOS 11中当前未包含的功能。
如果你在网站设计中采用了安全区域插入常数,你可能会注意到,除了安全区域插入之外,你还需要指定最小的内填充。在上面页面中,如果我们把12px的左填充换成constant(safe-area-inset-left)
,当设备旋转回垂直方向时,左边的安全插入距离变成了0px,文本便紧贴着屏幕边缘了。
安全插距并不能替代边距。
为了解决这个问题,我们想指定默认padding和安全区域插入距离两者中更大的为我们的padding。幸运的是,我们可以用全新的CSS函数min()
和max()
来实现,这两个函数会在未来的Safari 技术预览版中可用。这两个函数都接受任意数量的参数,并返回最小值或最大值。它们能用在calc()
里面,或者彼此嵌套。并且这两个函数都允许使用calc()
作为参数,就像使用数字一样。
在当前场景下,我们要用max()
:
@supports(padding: max(0px)) { .post { padding-left: max(12px, constant(safe-area-inset-left)); padding-right: max(12px, constant(safe-area-inset-right)); } }
使用@support做功能检测很必要,因为现在所有的浏览器杜不支持这两个函数,并且由于CSS对无效变量的处理,我们需要在@supports查询不确定是否支持的功能再去使用。
在我们的示例页面中,设备处于垂直方向时,constant(safe-area-inset-left)
解析为0px,因此max()
函数返回的是12px。在横屏时,由于存在“刘海”,max()
函数返回的是较大的constant(safe-area-inset-left)
,因此可以确保重要的内容总是在可视区域之内。
使用max()将安全区域插距与传统边距组合。
有经验的Web开发人员可能以前遇到过“CSS锁”机制,通常用于将CSS属性绑定到特定范围的值。min() 和 max() 一起使用使得这更容易,并将有助于实现有效的响应式设计。
转载于:https://www.cnblogs.com/jiye123/p/7999235.html
iPhone X Web 设计相关推荐
- 通过响应式web设计,使本站支持手机浏览
2019独角兽企业重金招聘Python工程师标准>>> 2014-01-28 14:49:14 现在越来越多的人通过手机来上网,手机由于屏幕尺寸的原因,当浏览为PC端浏览器设计的网页 ...
- Web 设计中的苹果风
优雅的设计贯串苹果所有的产品,也包括网站,不仅苹果自己的网站,世界上有无数模仿苹果的网站设计,然而是什么构成了苹果式网站设计风格?浅淡的配 色,大面积留白,清晰统一的导航,雅致的图标,还有,拒绝使用 ...
- 《移动优先与响应式Web设计》一1.2 设备不同,功能不同
本节书摘来异步社区<移动优先与响应式Web设计>一书中的第1章,第1.2节,作者: [美]Luke Wroblewski , Ethan Marcotte 译者: 司徒卓恆 责编: 赵轩, ...
- 移动 Web 设计中的一些错误理念
目前,移动互联网飞速发展,越来越多的网站和应用开始向移动设备上迁移.但是,由于设备和操作方式的不同,移动Web设计和传统的Web设计之间有很多不同点,这就导致了一些错误的设计理念出现. 在设计过程中我 ...
- 响应式Web设计——最佳指南
2012年被称为智能手机年.根据最近一份调查显示,美国的智能手机覆盖率已达50%.现在确实是提升移动终端用户体验的大好时机.如果你正运营一个网站,那就必须有一个响应式的Web设计,以便可以从移动终端上 ...
- 【转发】响应式Web设计?怎样进行?
什么是响应式Web设计?怎样进行? 眼下,几乎每个新客户都希望他们的网站可以有专门的移动设备版本.最完美的情况呐,就是为iPhone.iPad.黑莓.Kindle-各自打造一款--页面分辨率还必须兼容 ...
- 九张 Gif 图回顾 Web 设计的 25 年历史
原文出处: fastcodesign 译文出处:码农网 – 小峰 Froont,一家为web设计师制作工具的旧金山公司,用9个GIF格式动画来表现网页设计在过去25年的发展历程.如果你想知道为什么 ...
- 自适应网页设计/响应式Web设计 (Responsive Web Design)
随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...
- 什么是响应式Web设计?怎样进行?
开 始第一篇.老规矩,先无聊的谈论天气一类的话题.十一长假,天气也终于开始有些秋天的味道,坐在屋里甚至觉得需要热咖啡.话说两年前也是在国庆假期里开始 做Joomla文档翻译的:长假好时光,总会可以抽出 ...
最新文章
- 织梦同步静态文件到服务器,静态网站添加到织梦
- 关于I2C协议和SPI协议学习之中的补充修改
- python编程案例教程答案-Python基础案例教程
- (转)elasticsearch6.0版本安装head插件
- 三分钟掌握PHP操作数据库
- 云小课 | 守护网络安全不是问题,iptables的四表五链为你开启“八卦阵”
- 30天扣篮训练计划_明日之后:网易CH用心良苦?狼人画出“辐射高校30天计划”,绝了...
- 封装系统驱动放哪里啊_MPS做一体化电机驱动方案有三大绝招
- 以太坊:用 Solidity 写测试用例
- 香山处理器仿真环境搭建
- 设计一个电商平台积分兑换系统的流程和技术选型
- JSD-2204-MVC-微博项目-Day15
- 计算机装固态硬盘会不会卡,加装SSD固态硬盘,电脑还是卡?揭晓背后原因,教你10S开机!...
- SCSI的配置全攻略(ISCSI Target/initiator)
- 基于百度ai的抑郁症分析_AI根据脑波模式预测有效的抑郁症治疗
- U34202 JerryC Loves Driving 洛谷
- 各种浏览器缓存清楚的方法
- mysql iops_如何计算MYSQL的IOPS
- java:用Swing做一个普通计算器
- ArcGIS中各种合并要素(Union、Merge、Append、Dissolve)的异同点分析 转载
热门文章
- Linux--文件结构体struct file
- ffmpeg在windows下的编译
- 在windows下写makefile编译代码
- el-table列宽设置百分比无效;el-table使用min-width设置百分比;el-table百分比设置无效;
- epoll为什么比select和poll效率更高
- [react-router] react的路由和普通路由有什么区别?
- javascript学习系列(19):数组中的Array.from方法
- 前端学习(3127):react-hello-react之字符串形式
- 前端学习(2627):node安装
- 前端学习(2047)vue之电商管理系统电商系统之使用cdn优化打包