Web开发者和设计师必须要知道的 iOS 8 十个变化
2014-09-29 09:55 罗罗磊磊 luolei.org 字号：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，? 混合应用: 更快的、优化的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图片
Crypto API iPhone 6 和 iPhone6 Plus
iPhone 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图标大小和登录页的图片大
小。
尺寸
Viewport’s device-width (in CSS pixels)
iPhone 6 iPhone 6 Plus 4.7” 375
5.5” 414 400 3(近似值)
Viewport’s device-width (Android设备同分辨率参考) 360 Device Pixel Ratio 像素比
2
Rendered Pixels 渲染像素 (默认 viewport size * dpr) 750×1334 1242×2208 Physical pixels 物理像素
750×1334 1080×1920
对于新 iPhone 的屏幕尺寸，推荐一篇文章\ 。
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%的内容。也许这并不是什么大问题，但是你也许还是得检查下你的网站是否适配。