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的方法》。
参考资料:
Confirmed iPhone 6 and 6 Plus viewport device-width
iPhone 6 and 6 Plus Responsive Breakpoints
出处:http://peunzhang.cnblogs.com/
iphone6来了,我该做点什么(兼容iphone6的方法)的更多相关文章
- 【原】iphone6来了,我该做点什么(兼容iphone6的方法)
北京时间2014年9月10日凌晨1点,苹果公司正式发布其新一代产品 iPhone6,相信做webapp开发的同学对它是充满了好奇和等待,也担心它带来各种坑爹,高清的分辨率,升级的retina显示屏,我 ...
- StoryBoard和代码结合 按比例快速兼容iPhone6/6 Plus教程
转:http://www.cocoachina.com/ios/20141230/10800.html 编者注:根据网友们的评论,文章中的方法有很大的局限性,请谨慎使用! 现在由于苹果公司出了6和6 ...
- python做反被爬保护的方法
python做反被爬保护的方法 网络爬虫,是一个自动提取网页的程序,它为搜索引擎从万维网上下载网页,是搜索引擎的重要组成.但是当网络爬虫被滥用后,互联网上就出现太多同质的东西,原创得不到保护.于是,很 ...
- webview中的页面兼容iphone6和6+
其实写这篇文章的本不该是我,而应该是开发ios的小伙伴,但作为一个前端,我想我还是有必要做一下记录的! 首先我想说下在iphone6或者6+中webview内嵌套的页面宽度已经不在是320px,而是3 ...
- [转]Android通过NDK调用JNI,使用opencv做本地c++代码开发配置方法
原文地址:http://blog.csdn.net/watkinsong/article/details/9849973 有一种方式不需要自己配置所有的Sun JDK, Android SDK以及ND ...
- HTML5工具做屏幕自适应的两种方法
近一两年,HTML5在中国很火,也出了不少HTML5工具和模板.别的先不说,对于不同的H5工具,解决屏幕自适应问题的区别是什么? 简单来说,感应式设计是当用不同设备访问时,能够根据设备的宽度和高度对设 ...
- 在表单提交之前做校验-利用jQuery的submit方法
点击表单中的提交按钮,默认就会提交表单,如果要在表单提交之前做一些校验,那么就可以用jQuery的submit方法. 也就是jQuery的submit的方法执行顺序,在表单的提交之前.用法如下: $( ...
- Android(安卓)开发通过NDK调用JNI,使用opencv做本地c++代码开发配置方法 边缘检测 范例代码
以前写过两个Android开发配置文档,使用NDK进行JNI开发,这样能够利用以前已经写好的C++代码. 前两篇博客地址: http://blog.csdn.net/watkinsong/articl ...
- 对数据集做标准化处理的几种方法——基于R语言
数据集——iris(R语言自带鸢尾花包) 一.scale函数 scale函数默认的是对制定数据做均值为0,标准差为1的标准化.它的两个参数center和scale: 1)center和scale默认为 ...
随机推荐
- 我常用的delphi 第三方控件
转载:http://www.cnblogs.com/xalion/archive/2012/01/09/2317246.html 有网友问我常用的控件及功能.我先大概整理一下,以后会在文章里面碰到时再 ...
- Shell之date用法
创建以当前时间为文件名的 mkdir `date+%Y%m%d` 备份以时间做为文件名的 tar cvf./htdocs`date +%Y%m%d`.tar ./* date命令如何获得上星期的日期? ...
- 【转】Solr安全设置——对外禁用管理后台
本文转自:http://www.devnote.cn/article/94.html 测试于:Solr 4.5.1, Jdk 1.6.0_45, Tomcat 6.0.37 | CentOS 5.7 ...
- Android 启动画面
如果你的程序初始化时间过长,那么在初始化之前,程序会现实一个空白的activity页,十分难看. 添加一个启动画面的方法就是为响应的activity加入自定义的Theme,并在theme中设定 and ...
- web iphone css 兼容性
解决IPHONE网页兼容(部分字号变大): body{-webkit-text-size-adjust:none;}
- 使用webstorm操作git
0. 前言 在上一篇文章中,讲述了使用webstorm去调试node程序,最近研究了一下如何使用webstorm去操作git. 对于git的使用,大家的使用方式均有不同,最王道的方式非命令行莫属,基于 ...
- Android 图标添加消息提醒
实现方法: 1. 在对应的布局放置TextView或者ImageView. 2. 用Canvas在原来Icon的bitmap基础上进行绘制 3. 利用开源项目ViewBadger进行添加,很方便,而且 ...
- int *p()与int (*p)()的区别
int *p()是返回指针的函数 int (*p)()是指向函数的指针 返回指针的函数: int *a(int x,int y); 有若干个学生的成绩(每个学生有4门课程),要求在用户输入学生序号 ...
- Primace 5.0软件与KEIL单片机软件联合在线仿真步骤
Primace 软件是CME(京微雅格)公司的FPGA芯片开发专用软件.因为CME的FPGA,如M5.M7等内嵌有8051核,所以可以和MCU联合在线仿真,虽然FPGA内的程序不可控,不能一步一步的仿 ...
- mysql:表注释和字段注释
mysql:表注释和字段注释 1 创建表的时候写注释 create table test1 ( field_name int comment '字段的注释' )comment='表的注释'; 2 修改 ...