(0Web开发者和设计师必须要知道的iOS8十个变化.docxVIP

Web开发者和设计师必须要知道的 iOS 8 十个变化2014-09-29 09:55 罗罗磊磊 字号：T | T喜大普奔，喜极而泣，喜当爹，随着iPhone 6和iPhone 6 plus的上市，ios 8终于在上周推送更新了。新的设备，新的分辨率。接下来这篇文章介绍下 iOS 8有哪些变化。AD： 2014WOT全球软件技术峰会北京站 课程视频发布 11月21日-22日 与WOT技术大会相约深圳 现在抢票 喜大普奔，喜极而泣，，随着iPhone 6和iPhone 6 plus的上市，ios 8终于在上周推送更新了。新的设备，新的分辨率。接下来这篇文章介绍下 iOS 8有哪些变化。概述简介 iOS 8 上的 Safari 的更新 iPhone 6 和 iPhone 6 Plus 新 Api 支持 Safari 新功能和支持 iOS 8 原生优化 Safari 插件 新的设计 视频增强 iOS 8上的JS Bug 和问题 已经习惯了苹果官方的高冷，这次，苹果依旧没有更新任何与 Safari 或者 iOS 相关的文档，所以下面的所有数据和资料都是基于我自己的测试和 WWDC 上公布的信息。iOS 8 上的 Safari支持HTML5新APIs: WebGL (3D canvas), IndexedDB, Navigation Timing API， Crypto API 混合应用: 更快的、优化的WebView 支持滚动 Scroll 事件:终于支持了！ 视频播放: 全屏API，元数据API HTML模板元素 Safari 插件:原生App可以以插件的形式读取网页DOM 图片:支持Image Source Sets和动态PNGAPNG CSS：支持Shapes，支持小数单位 浏览器自动填写表单（支持信用卡调用摄像头扫描） 网页和本地应用交互：登录数据共享 EcmaScript 6 ：部分支持 SPDY:支持谷歌家的新网络协议了 文件上传失效了(这是Bug) 移除了minimal-ui属性 支持Yosemite上的远程调试 相比其他移动端上的浏览器，iOS 8并没有支持有些功能：dp单位的Media queries getUserMedia:访问本地硬件设备，捕获音频和视频的Api WebRTC:网页即时通信 @viewport 声明 Datalist WebP图片 iPhone 6 和 iPhone6 PlusiPhone 6 和 iPhone6 Plus 是苹果继 iPhone 5 后的又一款不同尺寸和不同分辨率的设备。iPhone 6 的参数为4.7寸大小和750×1334物理分辨率的屏幕（dpi 值与iphone 5s 相同），iPhone 6 Plus则是5.5寸和1080×1920分辨率(401 dpi)的屏幕。不走寻常路的苹果给这两分辨率取名叫Retina HD屏，嗯哼，比Retina多了一个HD。对于web开发者来说，不同的不仅仅是尺子上的大小。还包括默认viewport（关乎 width=device-width的设置），像素比（关乎高清图片的应用），icon图标大小和登录页的图片大小。?iPhone 6iPhone 6 Plus尺寸4.7”5.5”Viewport’s device-width (in CSS pixels)375414Viewport’s device-width (Android设备同分辨率参考)360400Device Pixel Ratio 像素比23(近似值)Rendered Pixels 渲染像素 (默认 viewport size * dpr)7502208Physical pixels 物理像素7501920对于新 iPhone 的屏幕尺寸，推荐一篇文章iPhone 6 Screens Demystified 。VIEWPORT SIZE正在读这篇文章的你应该已经知道直到上周，所有的 iPhone 和 iPod 使用的都是320px的屏幕宽度。iPhone 6 和 Plus 相比前代更加宽，给我们带来了更多的空间，苹果终于决定加宽浏览器宽度了。但是苹果奇葩的是使用了一套特殊的屏幕像素值。大部分4.7~5寸的安卓设备的viewport宽设为360px，iPhone 6上却是375px，大部分5.5寸安卓机器（比如说三星Note）的viewport宽为400，iPhone 6 plus 上却是十分怪异的414px （╮(╯_╰)╭ 苹果你这样折腾是闹哪样啊）。这意味着相比同样尺寸的安卓机器，iPhone 6用户大概要少看4%的内容。也许这并不是什么大问题，但是你也许还是得检查下你的网站是否适配。适配新iPhone，你可以使用下面两段meta