Web开发者和设计师必需要知道的 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 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图标大小和登陆页的图片大小。

	iPhone 6	iPhone 6 Plus
尺寸	4.7”	5.5”
Viewport’s device-width (in CSS pixels)	375	414
Viewport’s device-width (Android设备同分辨率参考)	360	400
Device Pixel Ratio 像素比	2	3(近似值)
Rendered Pixels 渲染像素 (默认 viewport size * dpr)	750×1334	1242×2208
Physical pixels 物理像素	750×1334	1080×1920

对于新 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>

<meta name="viewport" content="width=375">

<meta name="viewport" content="width=414">

设备像素比

iPhone 6与 iphone 5同样，像素比都是2，可是另外一方面 iPhone 6 401的dpi真实的像素比值应该大约是2.60。为了解决这个问题，苹果又整了个新概念rendered pixels 渲染像素，若是像素比是3x,那么理论上一个css宽设为414px的屏幕应该拥有1242px的物理像素（现实中是1080px，小了13%）。

所以，若是你使用一个3x的图给高清的安卓设备，一样这样图也会适配 iPhone 6 Plus 可是iPhone 的浏览器在渲染在屏幕以前首先会调整图片大小。

图标大小

iOS特有的图标大小，在 iPhone 6 plus上是180×180，iPhone 6 上则仍是老的120×120。

适配iPhone 6 plus，则须要在中加上这段

<link rel="apple-touch-icon-precomposed" sizes="180x180" href="retinahd_icon.png">

启动图

若是你的webapp有一个启动图，那么你又得增长两行代码适配新 iPhone 了。

iPhone 6对应的图片大小是750×1294，iPhone 6 Plus 对应的是1242×2148 。

<link rel="apple-touch-startup-image" href="launch6.png" media="(device-width: 375px)">

<link rel="apple-touch-startup-image" href="launch6plus.png" media="(device-width: 414px)">

UA探测

目前位置，全部升级到iOS 8的 iPhone都使用一样的UserAgent，因此咱们暂时尚未办法在服务端判断这是什么设备，固然，经过JS和Media Queries咱们仍是能够经过技巧来判断的。

新的API

两个最重要的Api支持终于登陆了iOS,分别是WebGL和IndexedDB，与此同时，Safari也开始支持Web Cryptography和Navigation Timing。

WebGL支持3D模拟，而且是浏览器默认开启。对于游戏开发者来讲，这是一个好消息，更加丰富的交互和形式将在网页上出现。

你能够在微软的这个FishGl测试下 iOS 8 Safarai上进行3D渲染的效果。

IndexdDB是W3C继起用WebSQL后推出的新的标准，随着 iOS支持 IndexedDB，咱们能在不一样的手机浏览器上使用同一套数据库API。

Navigation Timing API对于web性能优化来讲是个好消息。经过这个API咱们能过测量更加精准的加载渲染时间，优化网页的用户体验。

Safari新功能

缩放

iPhone处于横屏的时候,iPad（横竖都可），若是你用手指捏放屏幕（好比说你想放大网页），你会进入一个标签预览模式，用起来却是挺方面，但是可能会与你在网页上使用的gesturechange事件所冲突，若是你要使用自定义缩放事件，首先爱你你得event.preventDefault()来阻止浏览器的默认事件。

取消 MINIMAL-UI

六个月前，苹果推出了了Minimal UI mode《iOS 7.1的Safari为meta标签新增minimal-ui属性，在网页加载时隐藏地址栏与导航栏》，iOS 8更新后则又取消了这个，依旧高冷女神范，没说为何。

表单自动填写和信用卡扫描功能

Safari现在支持自动补全表单，而且当Safari检测到你要填写的是信用卡的时候他会容许你开启摄像头直接扫描实体信用卡。

于此同时，Safari也支持autocomplete属性，参考latest spec。这意味着若是你在一个登陆页面，Safari能够调用Keychain里的数据自动填写用户名账号、密码。Luis Abreu写过一篇关于iOS 8安全和隐私相关的文章，推荐能够看看

RSS！

若是你的网站提供了RSS订阅，iOS 8用户能够直接在浏览你网页的时候在书签栏打开他。就是那个@图标里面有个订阅的按钮，虽然说有点小低调，但好歹仍是有嘛 ﾉ( ´ ▽ ` )ﾉ。

工具栏

如今地址栏和工具栏就变成半透明了。在 iOS 7上只有地址栏是半透明的。这意味着初次加载的时候网页可视区域变得更大（包含了底部的工具栏）。

iPad上的更新

iOS 7之后，使用iPhone上的Safari浏览网页，滚动的时候会自动隐藏工具栏（ipad不会），iOS 8 ipad也有了这个细节上的变化（横竖都有）。不一样的是，在横向模式的时候，iPad上面还有一小条，iPhone则是全屏。

除此以外，Safari在横屏模式开启侧边栏会保持原有的viewport大小，只会改变aspect-ratio

书签icon和经常使用网站

Safari终于支持收藏夹里和书签里的网页附带网站的icon图标。当你在地址栏输入关键字搜索的时候，一样会展现网站的icon（ipad刚刚我测试了下没有）。

跨平台切换

若是你同时使用Mac和iPhone，当你在iPhone上浏览一个网页，你能够在你的Mac上（须要Yosemite）继续阅读（今年WWDC上专门演示了这个功能，还得等到Yosemite的正式更新）。

更像native的webapp

若是你想让用户在网页上，无经肯定，就直接跳转到Apple Store下载你的应用，那是不可能的。想让网页与本地应有之间有交互，iOS 8带来更多的便捷性。

1. Safari插件
2. 共用认证（web和本地应用之间能共用安全凭证，无需再从新登陆）。

新的webview

此次iOS 8更新，最使人激动的消息就是混合应用与 Mac 上共同了一套 API，意味着iOS 上也能有更多的功能，Mac 和 iOS的通讯交互，还有：

1. 支持JavaScript与本地应用之间经过postMessage的交互
2. New classes configure the Web View similar to the power we have on Android’s Web View.（这段谁能翻译下）
3. 更强大的 Nitro引擎，相比前代4x速度的js执行速度。

新的 webview(WKWebkit)是新框架(WebKit.framework)的一部分，与老的UIWebView并非彻底兼容。可是老的webviwe依旧保留，因此老的webapp仍是会使用老的webview。

目前的GM版本（公开版也是同样的）依旧存在本地文件没法上传的bug，对于一些混合应用（例如Cordova PhoneGap）来讲，这（多webviwe）算是个好消息。

这就意味着，目前 iOS 8，拥有4个web引擎，固然，也意味着兼容性和bug都是有差别的。
1. Safari 
2. Web.app (使用full-screen 桌面应用) 
3. UIWebView (老) 
4. WKWebView（新）

你能够在 HTML5Test.com这里测试下你webapp的性能。

对于那种包壳应用和webviewe应用来讲，这个变化是十分重要的。好比说iOS上的Chrome和Facebook本地应用中的网页应用（咱们猎豹的电池医生、手机猎豹也大量应用webview）。根据一份报告，11.5%的iOS流量是来自基于webview的应用。

Safari 插件

iOS 8上的Safar 是第一个支持插件和拓展的系统预装浏览器（Firefox OS也许也算是一个）。从iOS 8开始，本地应用能够拓展到与 Safari 交互，主要经过两种方式：分享(Share extension)和动做(Actions)。Action 能够与DOM交互，意味着能够本地应用能够直接修改DOM元素。

全部的插件都须要用户主动选择来触发（须要点击分享中不一样的按钮来触发），暂时尚未能够自动运行的插件。

旧版 Safari 的分享 菜单一样被基于 JavaScript 的插件所替代。好比说添加到桌面现在就是一段 Safari 中的 js 代码。

除了苹果在WWDC上演示的功能，Safari的这个改进意味着浏览网页会有极大的体验改善。好比说你能够在Safari直接调用1Password或者LastPassword 保存的账号密码登陆，若是你的iPhone 有 Touch ID指纹识别，你甚至能够直接指纹验证登陆。

Pocket.com 已经声明即将推出针对 iOS 8的插件。

前端和设计师的福利

此次safari新增了不少html5，css3的支持

• CSS Shapes
• CSS object-fit
• CSS Background Blend modes
• word-spacing
• CSS Compositing and Blending
• Subpixel layout 支持小数点
• Animated PNG supported APNG格式图片
• Parallax effects and Pull-to-refresh supported （与Scroll事件相关）
• SVG Fragments Identifiers (for SVG Sprites)
• Image Source Set support
• HTML Template support

Animated PNG

APNG格式是PNG位图动画的拓展，但未得到PNG组织官方的承认，与GIF有点相似（只不过GIF是基于JPG的），这意味着咱们能够制做32位全彩半透明的动态图。

滚动时差与下拉刷新

若是你作过移动端的项目，你必定知道iOS7以及之前都不支持scrooll事件，iOS 8 终于支持滚动事件，这下你们终于能够在iOS上用到视觉滚差相关的js和css了，可是不保证彻底适配。

这个支持让咱们能够作出下拉刷新和无限下拉下载的效果。

小数点单位

Safari如今CSS单位从整数转成了浮点数。这意味着CSS对象模型中诸如offsetTop和ClientWidth可能会取得小数值，以前老的iOS都会返回整数值。

与此同时，这也意味着你能够用半个像素单位了。

div {  
   border-width: 0.5px;
}

SVG 片断标识

SVG没怎么玩过，这个属性也不懂，你们先看英文吧。

Fragment identifiers from SVG is a method to link to one specific fragment or portion of an SVG instead of the root element. This feature allow us to sprite SVG images in one file taking advantage of one HTTP request and caching. Similar to CSS Sprites, but with SVG images instead and with ids instead of positions.

CSS 合成和变形

利用mix-blend-mode这个新属性支持咱们把不一样形状的不一样元素合成到一张图片，这是Adobe在HTML5方面新出的一个功能。在他们的网站上你能看到演示的DEMO和文档。

从Adobe官网的例子演示来看，彷佛变形是生效了，合成并无生效（我Mac Chrome也没生效）。

CSS 形状

CSS 形状也是Adobe新出的一个特性。对于这个特性，推荐下W3Cplus上的《CSS Shapes 101》。我的仍是很看好这个特性的推广和应用的，能给咱们的网页设计带来更多的可能性。

Image Source Set

有了解响应式图片的开发者对这个应该不陌生，随着高清屏的普及，针对不一样的分辨率作适配是一个须要注意的问题，苹果iOS 8 支持Image Source Set Spec，意味着能够在<img>标签中使用新的属性。

<img src="lores.png" srcset="hires.png 2x, superhires.png 3x">

在上面这段代码的例子中，iPhone 6 Plus 的像素比是3x，它会加载superhires.png这张图片，而iPhone 5s,iPhone 6 则会加载hires.png这种图，其他的则加载lores.png。可是遗憾的是，iOS 暂时还不支持<picture>元素。

HTML模板

<template>对于webapp来讲十分有用，<template>中能够包含一段css或者js（不会被浏览器解析），实际应用中，咱们能够利用<template>中的代码建立一个新的node。

视频加强

此次更新对视频播放相关的加强了许多，iOS8开始支持全屏播放,Meta Data Api和CSS layering(话说你们知道HTML5 Video元素是能够经过CSS来控制吧？)

video元素的全屏播放

Safari不支持全屏播放API，即便是iOS8也不例外。可是能经过一个特殊的方法解决这个问题，在<video>元素中增长一段js。

<input type="button" value="Go Full screen"  onclick='document.querySelector("video").webkitEnterFullScreen()'>

视频 Metadata API

Safari开始支持<video>的preload="metadata"，可让浏览器触发loadedmetadata事件方便开发者控制。

CSS 分层

我能够经过css控制其余元素放在<video>以前。

iOS 8 JavaScript相关

• 部分支持ECMAScript 6,包括Promises, Iterators, Maps, For-of, Weak Maps等等。
• 后台运行：JavaScript会在后台继续运行（哪怕已经切换了窗口甚至Safari切换到后台，可是计时器 times 降低到1s的频率）。
• 支持scroll事件：很少说了，上面介绍过。
• Unprefixed Page Visibility AP ： 我没搞懂这个是什么（哪位知道求指导）
• 移除window.doNotTrack
• 支持window.currentScript

9月18更新:

有开发者发现：iPhone 5上的click事件300ms延迟已经取消了（只是Safari），可是其余设备上的Safari和 WebViews 上还有，延迟依旧在 iPod touch, iPads 和iPhone 5s上。

Bug和存在的问题

说了iOS8和iPhone 的更新，再来讲说目前发现的 Bug。

• 不支持文件上传！！！全部的文件上传都失效了，你能选择或者拍张照片，可是js不能得到任何数据。HTML或者XMLHttpRequest的POST请求也不行。可是这个问题可是在桌面启动的app没发生。

• WKWebKit：在新的引擎不能读取本地文件是个大问题，因此对于混合app来讲，还得使用老的UIWebView。

• window.prompt可能会致使Safari崩溃
• 附件:语音在input和labels输入时，无论用。(当输入的时候，label再也不发音)
• 桌面app的iframes中,touch事件没有被监测到。
• 手机休眠后，桌面app中的Timers和requestAnimationFrame回调没有执行。

本文原文为“iOS 8 and iPhone 6 for web developers and designers: next evolution for Safari and native webapps”

译者 @罗罗磊磊，转载请注明。

译者言

iOS 8给web前端带来的变化仍是很使人欣喜的，更强大的性能，更强大的浏览器和内核，更开放的接口，能够预见在针对iOS的web应用会有一个更大的用武之地。

文章很长，大量技术词汇，翻译了半天，若译文有错误或者不妥之处，欢迎指正和提供建议。