【原】iphone6来了,我该做点什么(兼容iphone6的方法)-阿里云开发者社区

开发者社区> 白树> 正文

【原】iphone6来了,我该做点什么(兼容iphone6的方法)

简介:
+关注继续查看

北京时间2014年9月10日凌晨1点,苹果公司正式发布其新一代产品 iPhone6,相信做webapp开发的同学对它是充满了好奇和等待,也担心它带来各种坑爹,高清的分辨率,升级的retina显示屏,我们该如何做好适配呢?

相比iPhone5,iPhone6拥有更高分辨率的retina HD display,而iPhone6 plus的像素密度达到了401ppi,相比原来的326ppi,提升了25%,显示画面细节更丰富。

iPhone6 Plus设备高为736pt,宽为414pt,缩放比例为@3X,设备像素比(DevicePixelRatio,缩写DPR)为3.0,分辨率为2208*1242,在这个分辨率下渲染后,图像等比降低分辨率至1920*1080,下图来自paintcodeapp官网,解析iphone6 6plus分辨率:

iPhone6 plus的高清分辨率(1920*1080)让人感到担忧,而事实上这样的设备市场上早就有,如三星的Galaxy S4(分辨率:1920x1080;设备像素比:3.0),只是用户数并不庞大,webpp开发对它的适配也是从原始的iphone 4设计稿960*640做起,保证内容的正常展现。iPhone6 plus的出现是对它的进一步推动,而对视觉和前端无疑是一项新的挑战。

那么,我们是否要专门为iphone 6 plus 1920*1080的页面单独做一套适配呢?

让我们先看腾讯云分析2014年第二季度移动行业数据报告,该数据覆盖的设备超过15亿,是非常具有参考价值的,先了解android屏幕分辨率排名:

可以看出大屏手机是未来趋势,虽然这样,但减去大屏手机所占的比例,其它android手机所占比例为61.5%,也就是说目前窄屏手机占了绝大多数,再看高端的iphone机器比例:

iPhone 4 依然拥有最多的用户数,不容忽视它的价值。虽然大屏手机是趋势,但我们的视觉稿应该是适配大部分的设备,目前数据上看,960*640或1136*640依然是我们设计的规格,从最多用户数的设备进行设计,大屏手机正常展现,向前兼容,向后看齐,可以解决大部分问题。

那么,这对视觉稿的要求比较高,如果设计一套页面,在所有ios和android设备都展现良好,是不需要对iPhone6做适配的;如果展现效果一般(例如大屏手机下内容太小),需要对页面再进一步适配,可以理解为我们常说的响应式设计。

这里笔者在近期的资料想出一个方法,利用CSS媒体查询做兼容,仅供参考,是否存在问题还要等待iPhone 6的机器到手再做测试下,到时会更新文章反馈大家(内容更新于20140928,修改了设备像素比为3.0)~

@media (device-width:375px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone 6 */
.class{}
}
@media (device-width:414px) and (-webkit-min-device-pixel-ratio:3.0){/* 兼容iphone6 plus */
.class{}
}

适配这事情,还是要结合具体的项目,看老板的脸色,看用户的心思,总之,在开发的角度上看,提前做好准备,保证产品的质量和体验,搞不好老板就给你加薪~

 

有关retina显示屏的原理,之前写过一篇文章《高清显示屏原理及设计方案》,推荐大家阅读。

有关iPhone4和iPhone5的兼容,之前写过一篇文章兼容iPhone4和iPhone5的方法》。

 

参考资料:

iphone-6/specs

retina HD display

Confirmed iPhone 6 and 6 Plus viewport device-width

iPhone 6 and 6 Plus Responsive Breakpoints

iPhone 6 Screens Demystified

iPhone 6 Screens Demystified(中文图解)

Device pixel density tests

 

作者:白树

出处:http://peunzhang.cnblogs.com/

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
8694 0
阿里云服务器ECS远程登录用户名密码查询方法
阿里云服务器ECS远程连接登录输入用户名和密码,阿里云没有默认密码,如果购买时没设置需要先重置实例密码,Windows用户名是administrator,Linux账号是root,阿小云来详细说下阿里云服务器远程登录连接用户名和密码查询方法
11044 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
10526 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
11954 0
windows server 2008阿里云ECS服务器安全设置
最近我们Sinesafe安全公司在为客户使用阿里云ecs服务器做安全的过程中,发现服务器基础安全性都没有做。为了为站长们提供更加有效的安全基础解决方案,我们Sinesafe将对阿里云服务器win2008 系统进行基础安全部署实战过程! 比较重要的几部分 1.
8823 0
阿里云服务器安全组设置内网互通的方法
虽然0.0.0.0/0使用非常方便,但是发现很多同学使用它来做内网互通,这是有安全风险的,实例有可能会在经典网络被内网IP访问到。下面介绍一下四种安全的内网互联设置方法。 购买前请先:领取阿里云幸运券,有很多优惠,可到下文中领取。
11778 0
腾讯云服务器 设置ngxin + fastdfs +tomcat 开机自启动
在tomcat中新建一个可以启动的 .sh 脚本文件 /usr/local/tomcat7/bin/ export JAVA_HOME=/usr/local/java/jdk7 export PATH=$JAVA_HOME/bin/:$PATH export CLASSPATH=.
4575 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
6661 0
+关注
72
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载