[[120719]]

喜大普奔，喜極而泣，喜當爹，隨著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 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渲染的效果。

[[120720]]

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給web前端帶來的變化還是很令人欣喜的，更強大的性能，更強大的瀏覽器和內核，更開放的接口，可以預見在針對iOS的web應用會有一個更大的用武之地。

文章很長，大量技術詞匯，翻譯了半天，若譯文有錯誤或者不妥之處，歡迎指正和提供建議。

更新

2014年9月26日:iOS 8.02 推送更新后，解決了Safari 無法上傳文件的Bug。

本文原文為"iOS 8 and iPhone 6 for web developers and designers: next evolution for Safari and native webapps"

譯者 @羅羅磊磊，轉載請注明。