Web開發者和設計師必需要知道的 iOS 8 十個變化

原文出處：  mobilexweb   譯文出處：羅磊（@羅羅磊磊）   歡迎分享原創到伯樂頭條

喜大普奔，喜極而泣，喜當爹，隨着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>

1 2	<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，則須要在中加上這段

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

啓動圖

若是你的webapp有一個啓動圖，那麼你又得增長兩行代碼適配新 iPhone 了。

iPhone 6對應的圖片大小是750×1294，iPhone 6 Plus 對應的是1242×2148 。

1 2	<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都會返回整數值。

與此同時，這也意味着你能夠用半個像素單位了。

1 2 3

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>標籤中使用新的屬性。

1	<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。

1	<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應用會有一個更大的用武之地。

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