WebAPP设计指南规范:适配iphone6技巧

2014-11-27 23:14
分享到:
第一点:ios8带来了9个变化:
1、上海苹果开发iPhone 6 和 iPhone 6 Plus
2、新 Api 支持
3、Safari 新功能和支持
4、iOS 8 原生优化
5、Safari 插件
6、全新的视觉APP设计
7、视频增强
8、iOS 8上的JS
9、解决了ios7上的一些Bug 和问题
第二个:跟我们web前端息息相关的就是 浏览器。
    ios上的Safari新功能详解
 
1、支持HTML5新APIs: WebGL (3D canvas), IndexedDB, Navigation Timing API, Crypto API
2、混合应用: 更快的、优化的WebView
3、支持滚动 Scroll 事件:终于支持了!
4、视频播放: 全屏API,元数据API
5、支持HTML模板元素
6、Safari 插件:原生App可以以插件的形式读取网页DOM
7、图片:支持Image Source Sets和动态PNG APNG
8、CSS:支持Shapes,支持小数单位
9、浏览器自动填写表单(支持信用卡调用摄像头扫描)
10、网页和本地应用交互:登录数据共享
11、EcmaScript 6 :部分支持
12、SPDY:支持谷歌家的新网络协议了
13、文件上传失效了(这是Bug)
14、移除了minimal-ui属性
15、支持Yosemite上的远程调试
相比其他移动端上的浏览器,iOS 8并没有支持有些功能:
dp单位的 Media queries
getUserMedia:访问本地硬件设备,捕获音频和视频的Api
WebRTC:网页即时通信
@viewport 声明
Datapst
WebP图片

001-iphone-6-mockup-isometric-view-psd-free-resource-graphic

上海苹果开发iphone6 以前的都是2倍。唯独iphone6 plus 是3倍。
iphone5 之前都是320*2=640px的宽度
iphone6设计尺寸:375*2=750px 宽度
iphone6 plus  设计尺寸是414*3=1242 或者1240px等。
如果你只要设计一套界面:建议你设计iphone6的尺寸为基础,然后用css来进行缩放。这样webAPP的显示效果是清楚的。不然那些图片都会显示很模糊。
桌面图标大小适配
iOS特有的图标大小,在 iPhone 6 plus上是180×180,iPhone 6 上则还是老的120×120。
适配iPhone 6 plus,则需要在中加上这段:
<pnk rel="apple-touch-icon-precomposed" sizes="180x180" href="retinahd_icon.png"> 
启动图的兼容性
如果你的webapp有一个启动图,那么你又得增加两行代码适配新 iPhone 了。
iPhone 6对应的图片大小是750×1294,iPhone 6 Plus 对应的是1242×2148 。
<pnk rel="apple-touch-startup-image" href="launch6.png" media="(device-width: 375px)"><pnk rel="apple-touch-startup-image" href="launch6plus.png" media="(device-width: 414px)">
Keywords:上海APP开发 网站地图 友情链接:大连口才培训 粉尘加湿机 南京地暖 深圳起重机 深圳食堂承包 盘锦商务礼品 影视配音 电子电器网 酒店餐具 深圳名片印刷 2be水环式真空泵 冷压端子 麦格官网 徒手整形培训
  • 需求咨询
  • 技术咨询
  • 运营咨询
  • 需求咨询点击咨询
  • 技术咨询点击咨询