iphonex屏幕尺寸html,三分钟弄懂iPhone X 设计尺寸和适配
被iPhone X刷了一天屏,到下午实在受不了各种假帖。标题写着“iPhone X 适配、指南、设计稿” 内容却是发布会回顾和手机介绍。索性自己去官网找素材写一篇只针对iPhone X适配的贴子,与设计图无关的内容通通不提
昨夜发布的iPhone 8属于常规升级,屏幕与以往的iPhone6、6S、7系列相同。在昨天发布的新机中,只有iPhone X的分辨率发生了变化,但变化仅限于物理像素层面。在真正决定屏幕内容的逻辑像素层面,新版的iPhone X与过去我们熟知的iPhone 4.7''、iPhone 5.5'' 放大模式宽度相同。通俗的说,iPhone X可看做是iPhone 4.7'' 的加长版
然而,事情并不是设计图加长这么简单。
过去,我们拿到的手机是方方正正的矩形,所以整个屏幕都可以看做是安全区域Safe Area,而如今由于iPhone X屏幕上的“刘海”以及屏幕四周采用圆角的设计,需要设计师对绘图区域做出调整。苹果给出的安全区域如下
页面内容不能超出安全区域(Safe Area)
避免将触发交互行为的按钮放在屏幕的底部,人们会在屏幕底端使用手势进入主屏或切换应用。(底部横条是Home键)
页面顶部和底部变化如下
右上图可以看到为了回避“刘海”和圆角,iPhone X的顶部状态栏和底部菜单栏都进行了增高。
值得注意的是,iPhone X 底部操作栏目进行了细微的放大。除了常见的底部导航栏外,Safari底部操作栏也有放大
讲完竖屏,在说横屏。
和竖屏一样,横屏的内容也要放置在Safe Area中
避免将触发交互行为的按钮放在屏幕的角落中。人们会在屏幕底端使用手势进入主屏或切换应用。这些系统的全局操作优先于App的操作。如果把功能放在角落里,用户操作起来也很费劲,尽量在用户手指可及区域内设计功能
最后说下最核心的问题,Safe Area 范围有多大?
下午我比对了官网上所有与iPhone X相关的界面,可以确定,Safe Area区间如下:
对于习惯用750x1334作图的设计师而言,iPhone X的到来并不会带来太大影响,iPhone X与iPhone 4.7’’之间的差异甚至不及当年iPhone 4和iPhone 5之间的差异
iPhone 4.7 与iPhone X 的Safe Area高度仅相差67 Point(134 px,@2x)
对于大多数采用瀑布流的页面来说,仅仅是屏幕高度上的变化,可以无视。但对于如:新手引导页、音乐播放器等需要单屏显示的界面就需要重新布局。
由于 iPhone X的屏幕比例发生变化,对于长期靠“等比缩放”完成适配的H5活动页而言也有不小的影响,需要对页面结构进行适当微调。
最后,如果应用程序需要隐藏状态栏,请重新考虑iPhone X上的布局。iPhone X的显示高度相对于iPhone 4.7''提供了更多的内容高度,状态栏和底部可以带来更多的空间。但需要就屏幕内容进行适当的调整。
如果不是特别需要沉浸式体验的界面,如视频、看图片,建议不要隐藏状态栏。
iphonex屏幕尺寸html,三分钟弄懂iPhone X 设计尺寸和适配相关推荐
- 快速弄懂iPhone X 设计尺寸和适配
iPhone X适配分析 被iPhone X刷了一天屏,到下午实在受不了各种假帖.标题写着"iPhone X 适配.指南.设计稿" 内容却是发布会回顾和手机介绍.索性自己去官网找素 ...
- iPhoneX设计稿适配Android,三分钟弄懂iPhoneX设计尺寸和适配(二)
怎么避免"刘海"尴尬? 很简单,要保持好安全距离,刘海片儿一点也不可怕!我根据官方文档量了下,边距是10pt(@1x) 另外,屏幕显示不再是矩形,而是切割成了大圆角矩形,为了避免显 ...
- in作为介词的用法_三分钟弄懂“at”,“in”,“on”三个时间介词的基本用法!...
"at","in","on"都是介词,他们既可以做方位介词,也可以做时间介词.很多人会弄不清他们的用法,我尝试用一种比较简单的方式,帮助大家 ...
- 5分钟弄懂语音识别技术原理
5分钟弄懂语音识别技术原理 首先,我们知道声音实际上是一种波.常见的mp3.wmv等格式都是压缩格式,必须转成非压缩的纯波形文件来处理,比如Windows PCM文件,也就是俗称的wav文件.wav文 ...
- 职称计算机证是继续教育的内容吗,豆腐网教你一分钟弄懂继续教育学时认定表及上传注意事项~...
原标题:豆腐网教你一分钟弄懂继续教育学时认定表及上传注意事项~ 大家好,我是豆腐网王老师,专注于南京工程师职称评审政策解读,关注我,让您轻松面对职称评审,少走弯路!!! 南京中高级职称申报已有段时间, ...
- java和python的web自动化有什么区别-三分钟看懂Python和Java的区别
随着人工智能的火爆,Python和Java一直在各种流行编程语言中名列前茅.其实Java和Python有些相似,因为很多编程语言之间是互通的.Java现在还是第一,不知道Python未来会不会超越Ja ...
- python和java一样吗-三分钟看懂Python和Java的区别
随着人工智能的火爆,Python和Java一直在各种流行编程语言中名列前茅.其实Java和Python有些相似,因为很多编程语言之间是互通的.Java现在还是第一,不知道Python未来会不会超越Ja ...
- python高阶函数(三分钟读懂)
python高阶函数(三分钟读懂) 函数式编程 Python中,函数是一等对象 一等对象:具有特点 ① 对象是在运行时创建的 ② 能赋值给变量或作为数据结构中的元素 ③ 能作为参数传递 ④ 能作为返回 ...
- python和java的区别-三分钟看懂Python和Java的区别
随着人工智能的火爆,Python和Java一直在各种流行编程语言中名列前茅.其实Java和Python有些相似,因为很多编程语言之间是互通的.Java现在还是第一,不知道Python未来会不会超越Ja ...
- 三分钟读懂新一代人工智能——ChatGPT
2022年以来,AI开始在很多贴近消费者的领域发挥越来越大的作用,之前我写过一篇文章<一分钟学会AI绘画和创作>,很多朋友纷纷尝鲜. 最近一个月以来,OpenAI公司推出的智能机器人Cha ...
最新文章
- 【转】家庭装修预算计算公式大全
- vue-cli proxy中跨域中pathRewrite配置理解
- 记忆与思考再到使用需要时间吗?
- hadoop商品推荐_北京尚学堂学员学习经验分享:商品推荐
- 视频教程-网络规划设计师5天修炼-软考
- 彻底清除计算机病毒的方式是,彻底清除电脑病毒的小方法
- STM32前言知识总结
- Cannot enhance @Configuration bean definition ‘dataSourceConfig‘ since its singleton instanc .......
- 目前缺少用于语义分割的 3D LiDAR 数据吗?关于三维点云数据集和方法的调查
- ae如何把已有图片当做蒙版_AE遮罩教程,如何用AE创建文字蒙版遮罩
- mysql创建表的哈衣_地狱の沙汰も君次第日语谐音歌词, TV动画《鬼灯的冷彻》片头曲中文音译...
- Python_Cxfreeze打包exe
- CDN加速可以为网络用户解决哪些难题?
- 北航计算机学院王华峰,计算机前沿科学与技术分论坛第二场宣讲会
- CSS进阶(4)- 扩展内容
- 基于 Quartz 的调度中心
- 个人官网导航网址放旗下网站源码
- 在Visual Studio Code 中配置Python 中文乱码问题
- 电影TS、TC、SCR、R5、BD、HD等版本是什么意思
- 有缺陷的一元三次方程求解设计(盛金公式)