Web開發人員和設計師必須要知道的 iOS 8 十個變化，開發人員ios

Web開發人員和設計師必須要知道的 iOS 8 十個變化，開發人員ios
原文出處： 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:支援Google家的新網路通訊協定了
• 檔案上傳失效了(這是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>

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

12	<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帶來更多的便捷性。

新的webview

這次iOS 8更新，最令人激動的訊息就是混合應用與 Mac 上共同了一套 API，意味著iOS 上也能有更多的功能，Mac 和 iOS的通訊互動，還有：

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

與此同時，這也意味著你可以用半個像素單位了。

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

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