【原】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/

目录
相关文章
|
6月前
|
网络安全 开发工具 数据安全/隐私保护
如何把ipa文件(iOS安装包)安装到iPhone手机上? 附方法汇总
如何把ipa文件(iOS安装包)安装到iPhone手机上? 附方法汇总
|
2月前
|
网络安全 开发工具 数据安全/隐私保护
如何把 ipa 文件 (iOS 安装包) 安装到 iPhone 手机上? 附方法汇总
如何把 ipa 文件 (iOS 安装包) 安装到 iPhone 手机上? 附方法汇总
|
11月前
|
网络安全 开发工具 数据安全/隐私保护
如何把 ipa 文件 (iOS 安装包) 安装到 iPhone 手机上? 附方法汇总
苹果 APP 安装包 ipa 如何安装在手机上?很多人不知道怎么把 ipa 文件安装到手机上,这里就整理了苹果 APP 安装到 iOS 设备上的方式,仅供参考
|
11月前
|
Web App开发 网络虚拟化 iOS开发
如何获取苹果设备的UDID(iPhone/iPad UDID查询方法)
如何获取苹果设备的UDID(iPhone/iPad UDID查询方法)
|
iOS开发 开发者
ios app安装到iphone手机的方法
ios app安装到iphone有三种不同的方法,各种方法的使用场景是不同的,你可以根据不同的场景来使用其中一种方法。
504 0
|
iOS开发
iphone中获取文件路径的4种方法
iphone中获取文件路径的4种方法
323 0
|
iOS开发
方法:怎样把手机号码导入苹果iphone手机通讯录?
第(1)步:首先你得打开你的苹果iphone手机,再次,你得在电脑上打开软件,金芝号码提取导入助手。第(2)步:然后你来到电脑上,把你自己准备好的号码和姓铭都复制好,打开电脑软件,把它们粘贴到软件的第三个功能模块:导入通讯录。然后点上面的“生成通讯录”。你将得到一个文件。第(3)步:最后你从电脑上的徽xin或者电脑Q把这个文件发给你的苹果iphone手机,在手机上打开它,其他应用方式打开,选通讯录,储存,就可以把号码导入苹果iphone手机通讯录。
方法:怎样把手机号码导入苹果iphone手机通讯录?
方法:号码如何批量导入苹果手机通讯录?
操作一:在电脑上打开软件,金芝号码提取导入助手。然后你把你的号码复制过来,放进软件的“导入通讯录”功能。操作二:选择“生成通讯录”,会得到一个文件,你把文件存放到电脑桌面。操作三:最后你再把电脑桌面上的文件,通过电脑上的薇xin或电脑Q,发送给你的手机徽信或者手机扣扣,在苹果手机上打开它,即可把号码批量导入苹果手机通讯录。
方法:号码如何批量导入苹果手机通讯录?
|
存储 Android开发 iOS开发
方法:把电脑excel表格通讯录联系人导入华为小米苹果手机
闻道有先后,术业有专攻。在你的领域你是熟悉的,但是如何批量把电脑excel表格通讯录联系人导入华为小米苹果手机方面,金芝号码提取导入助手,是很简单便捷的方式,当然了苹果手机iphone也可以导入,它是网上常见的工具。
429 0
方法:把电脑excel表格通讯录联系人导入华为小米苹果手机
|
JavaScript 安全 区块链
【阿里聚安全·安全周刊】科学家警告外星恶意代码|新方法任意解锁iPhone
阿里安全周刊第八十六期,分享本周移动安全热点和技术知识。
4246 0