本文原文為"iOS 8 and iPhone 6 for web developers and designers: next evolution for Safari and native webapps"
譯者 @羅羅磊磊讲弄，轉(zhuǎn)載請注明养匈。
喜大普奔亏钩，喜極而泣沛婴，喜當(dāng)?shù)?/del>，隨著iPhone 6和iPhone 6 plus的上市昔汉，ios 8終于在上周推送更新了懈万。新的設(shè)備，新的分辨率靶病。接下來這篇文章介紹下 iOS 8有哪些變化钞速。
概述
- 簡介 iOS 8 上的 Safari 的更新
- iPhone 6 和 iPhone 6 Plus
- 新 Api 支持
- Safari 新功能和支持
- iOS 8 原生優(yōu)化
- Safari 插件
- 新的設(shè)計(jì)
- 視頻增強(qiáng)
- iOS 8上的JS
- Bug 和問題
已經(jīng)習(xí)慣了蘋果官方的高冷，這次嫡秕，蘋果依舊沒有更新任何與 Safari 或者 iOS 相關(guān)的文檔，所以下面的所有數(shù)據(jù)和資料都是基于我自己的測試和 WWDC 上公布的信息苹威。
iOS 8 上的 Safari
- 支持HTML5新APIs: WebGL (3D canvas), IndexedDB, Navigation Timing API昆咽， Crypto API
- 混合應(yīng)用: 更快的、優(yōu)化的WebView
- 支持滾動 Scroll 事件:終于支持了牙甫！
- 視頻播放: 全屏API掷酗，元數(shù)據(jù)API
- HTML模板元素
- Safari 插件:原生App可以以插件的形式讀取網(wǎng)頁DOM
-
圖片:支持
Image Source Sets和動態(tài)PNGAPNG -
CSS：支持
Shapes，支持小數(shù)單位 - 瀏覽器自動填寫表單（支持信用卡調(diào)用攝像頭掃描）
- 網(wǎng)頁和本地應(yīng)用交互：登錄數(shù)據(jù)共享
- EcmaScript 6 ：部分支持
- SPDY:支持谷歌家的新網(wǎng)絡(luò)協(xié)議了
- 文件上傳失效了(這是Bug)
- 移除了
minimal-ui屬性 - 支持
Yosemite上的遠(yuǎn)程調(diào)試
相比其他移動端上的瀏覽器窟哺，iOS 8并沒有支持有些功能：
- dp單位的
Media queries - getUserMedia:訪問本地硬件設(shè)備泻轰，捕獲音頻和視頻的Api
- WebRTC:網(wǎng)頁即時通信
- @viewport 聲明
- Datalist
- WebP圖片
iPhone 6 和 iPhone6 Plus
iPhone 6 和 iPhone6 Plus 是蘋果繼 iPhone 5 后的又一款不同尺寸和不同分辨率的設(shè)備。iPhone 6 的參數(shù)為4.7寸大小和750×1334物理分辨率的屏幕（dpi 值與iphone 5s 相同）且轨，iPhone 6 Plus則是5.5寸和1080×1920分辨率(401 dpi)的屏幕浮声。不走尋常路的蘋果給這兩分辨率取名叫Retina HD屏，嗯哼旋奢，比Retina多了一個HD泳挥。
對于web開發(fā)者來說，不同的不僅僅是尺子上的大小至朗。還包括默認(rèn)viewport（關(guān)乎 width=device-width的設(shè)置）屉符，像素比（關(guān)乎高清圖片的應(yīng)用），icon圖標(biāo)大小和登錄頁的圖片大小。
| iPhone 6 | iPhone 6 Plus | |
|---|---|---|
| 尺寸 | 4.7” | 5.5” |
| Viewport’s device-width (in CSS pixels) | 375 | 414 |
| Viewport’s device-width (Android設(shè)備同分辨率參考) | 360 | 400 |
| Device Pixel Ratio 像素比 | 2 | 3(近似值) |
| Rendered Pixels 渲染像素 (默認(rèn) viewport size * dpr) | 750×1334 | 1242×2208 |
| Physical pixels 物理像素 | 750×1334 | 1080×1920 |
對于新 iPhone 的屏幕尺寸矗钟，推薦一篇文章"iPhone 6 Screens Demystified" 唆香。
VIEWPORT SIZE
正在讀這篇文章的你應(yīng)該已經(jīng)知道
直到上周，所有的 iPhone 和 iPod 使用的都是320px的屏幕寬度吨艇。iPhone 6 和 Plus 相比前代更加寬躬它，給我們帶來了更多的空間，蘋果終于決定加寬瀏覽器寬度了秸应。但是蘋果奇葩的是使用了一套特殊的屏幕像素值虑凛。大部分4.7~5寸的安卓設(shè)備的viewport寬設(shè)為360px，iPhone 6上卻是375px软啼，大部分5.5寸安卓機(jī)器（比如說三星Note）的viewport寬為400桑谍，iPhone 6 plus 上卻是十分怪異的414px （╮(╯_╰)╭ 蘋果你這樣折騰是鬧哪樣啊）祸挪。這意味著相比同樣尺寸的安卓機(jī)器锣披，iPhone 6用戶大概要少看4%的內(nèi)容。也許這并不是什么大問題贿条，但是你也許還是得檢查下你的網(wǎng)站是否適配雹仿。
適配新iPhone，你可以使用下面兩段<meta>
<meta name="viewport" content="width=375">
<meta name="viewport" content="width=414">
設(shè)備像素比
iPhone 6與 iphone 5一樣整以，像素比都是2胧辽，但是另一方面 iPhone 6 401的dpi真實(shí)的像素比值應(yīng)該大約是2.60。為了解決這個問題公黑，蘋果又整了個新概念rendered pixels 渲染像素邑商，如果像素比是3x,那么理論上一個css寬設(shè)為414px的屏幕應(yīng)該擁有1242px的物理像素（現(xiàn)實(shí)中是1080px，小了13%）凡蚜。
因此人断，如果你使用一個3x的圖給高清的安卓設(shè)備，同樣這樣圖也會適配 iPhone 6 Plus 但是iPhone 的瀏覽器在渲染在屏幕之前首先會調(diào)整圖片大小朝蜘。
圖標(biāo)大小
iOS特有的圖標(biāo)大小恶迈，在 iPhone 6 plus上是180×180，iPhone 6 上則還是老的120×120谱醇。
適配iPhone 6 plus暇仲，則需要在<head>中加上這段
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="retinahd_icon.png">
啟動圖
如果你的webapp有一個啟動圖，那么你又得增加兩行代碼適配新 iPhone 了副渴。
iPhone 6對應(yīng)的圖片大小是750×1294熔吗，iPhone 6 Plus 對應(yīng)的是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桅狠，所以我們暫時還沒有辦法在服務(wù)端判斷這是什么設(shè)備，當(dāng)然，通過JS和Media Queries我們還是可以通過技巧來判斷的中跌。
新的API
兩個最重要的Api支持終于登錄了iOS,分別是WebGL和IndexedDB咨堤，與此同時，Safari也開始支持Web Cryptography和Navigation Timing漩符。
WebGL支持3D模擬一喘，并且是瀏覽器默認(rèn)開啟。對于游戲開發(fā)者來說嗜暴，這是一個好消息凸克，更加豐富的交互和形式將在網(wǎng)頁上出現(xiàn)。
你可以在微軟的這個FishGl測試下 iOS 8 Safarai上進(jìn)行3D渲染的效果闷沥。
IndexdDB是W3C繼起用WebSQL后推出的新的標(biāo)準(zhǔn)萎战，隨著 iOS支持 IndexedDB，我們能在不同的手機(jī)瀏覽器上使用同一套數(shù)據(jù)庫API舆逃。
Navigation Timing API對于web性能優(yōu)化來說是個好消息蚂维。通過這個API我們能過測量更加精準(zhǔn)的加載渲染時間，優(yōu)化網(wǎng)頁的用戶體驗(yàn)路狮。
Safari新功能
縮放
iPhone處于橫屏的時候,iPad（橫豎均可）虫啥，如果你用手指捏放屏幕（比如說你想放大網(wǎng)頁），你會進(jìn)入一個標(biāo)簽預(yù)覽模式奄妨，用起來倒是挺方面涂籽，可是可能會與你在網(wǎng)頁上使用的gesturechange事件所沖突，如果你要使用自定義縮放事件砸抛，首先愛你你得event.preventDefault()來阻止瀏覽器的默認(rèn)事件又活。
取消 MINIMAL-UI
六個月前，蘋果推出了了Minimal UI mode《iOS 7.1的Safari為meta標(biāo)簽新增minimal-ui屬性锰悼，在網(wǎng)頁加載時隱藏地址欄與導(dǎo)航欄》，iOS 8更新后則又取消了這個团赏，依舊高冷女神范箕般，沒說為什么。
表單自動填寫和信用卡掃描功能
Safari如今支持自動補(bǔ)全表單舔清，并且當(dāng)Safari檢測到你要填寫的是信用卡的時候他會允許你開啟攝像頭直接掃描實(shí)體信用卡丝里。
于此同時，Safari也支持autocomplete屬性体谒，參考latest spec杯聚。這意味著如果你在一個登錄頁面，Safari可以調(diào)用Keychain里的數(shù)據(jù)自動填寫用戶名帳號抒痒、密碼幌绍。Luis Abreu寫過一篇關(guān)于iOS 8安全和隱私相關(guān)的文章，推薦可以看看
RSS！
如果你的網(wǎng)站提供了RSS訂閱傀广，iOS 8用戶可以直接在瀏覽你網(wǎng)頁的時候在書簽欄打開他颁独。就是那個@圖標(biāo)里面有個訂閱的按鈕，雖說有點(diǎn)小低調(diào)伪冰，但好歹還是有嘛 ?( ′ ▽ ` )?誓酒。
工具欄
現(xiàn)在地址欄和工具欄就變成半透明了。在 iOS 7上只有地址欄是半透明的贮聂。這意味著初次加載的時候網(wǎng)頁可視區(qū)域變得更大（包含了底部的工具欄）靠柑。
iPad上的更新
iOS 7以后，使用iPhone上的Safari瀏覽網(wǎng)頁吓懈，滾動的時候會自動隱藏工具欄（ipad不會）歼冰，iOS 8 ipad也有了這個細(xì)節(jié)上的變化（橫豎都有）。不同的是骄瓣，在橫向模式的時候停巷，iPad上面還有一小條，iPhone則是全屏榕栏。
除此之外畔勤，Safari在橫屏模式開啟側(cè)邊欄會保持原有的viewport大小，只會改變aspect-ratio
書簽icon和常用網(wǎng)站
Safari終于支持收藏夾里和書簽里的網(wǎng)頁附帶網(wǎng)站的icon圖標(biāo)扒磁。當(dāng)你在地址欄輸入關(guān)鍵字搜索的時候庆揪，同樣會展示網(wǎng)站的icon（ipad剛剛我測試了下沒有）。
跨平臺切換
如果你同時使用Mac和iPhone妨托，當(dāng)你在iPhone上瀏覽一個網(wǎng)頁缸榛，你可以在你的Mac上（需要Yosemite）繼續(xù)閱讀（今年WWDC上專門演示了這個功能，還得等到Y(jié)osemite的正式更新）兰伤。
更像native的webapp
如果你想讓用戶在網(wǎng)頁上内颗，無經(jīng)確定，就直接跳轉(zhuǎn)到Apple Store下載你的應(yīng)用敦腔，那是不可能的均澳。想讓網(wǎng)頁與本地應(yīng)有之間有交互，iOS 8帶來更多的便捷性符衔。
- Safari插件
- 共用認(rèn)證（web和本地應(yīng)用之間能共用安全憑證找前，無需再重新登錄）。
新的webview
這次iOS 8更新判族，最令人激動的消息就是混合應(yīng)用與 Mac 上共同了一套 API躺盛，意味著iOS 上也能有更多的功能，Mac 和 iOS的通信交互形帮，還有：
- 支持JavaScript與本地應(yīng)用之間通過
postMessage的交互 - New classes configure the Web View similar to the power we have on Android’s Web View.（這段誰能翻譯下）
- 更強(qiáng)大的
Nitro引擎槽惫，相比前代4x速度的js執(zhí)行速度周叮。
新的 webview(WKWebkit)是新框架(WebKit.framework)的一部分，與老的UIWebView并不是完全兼容躯枢。但是老的webviwe依舊保留则吟，所以老的webapp還是會使用老的webview。
目前的GM版本（公開版也是一樣的）依舊存在本地文件無法上傳的bug锄蹂，對于一些混合應(yīng)用（例如Cordova PhoneGap）來說氓仲，這（多webviwe）算是個好消息。
這就意味著得糜，目前 iOS 8敬扛，擁有4個web引擎，當(dāng)然朝抖，也意味著兼容性和bug都是有差異的啥箭。
- Safari
- Web.app (使用full-screen 桌面應(yīng)用)
- UIWebView (老)
- WKWebView（新）
你可以在 HTML5Test.com這里測試下你webapp的性能。
對于那種包殼應(yīng)用和webviewe應(yīng)用來說治宣，這個變化是十分重要的急侥。比如說iOS上的Chrome和Facebook本地應(yīng)用中的網(wǎng)頁應(yīng)用（我們獵豹的電池醫(yī)生、手機(jī)獵豹也大量應(yīng)用webview）侮邀。根據(jù)一份報(bào)告坏怪，11.5%的iOS流量是來自基于webview的應(yīng)用。
Safari 插件
iOS 8上的Safar 是第一個支持插件和拓展的系統(tǒng)預(yù)裝瀏覽器（Firefox OS也許也算是一個）绊茧。從iOS 8開始铝宵，本地應(yīng)用可以拓展到與 Safari 交互，主要通過兩種方式：分享(Share extension)和動作(Actions)华畏。Action 可以與DOM交互鹏秋，意味著可以本地應(yīng)用可以直接修改DOM元素。
所有的插件都需要用戶主動選擇來觸發(fā)（需要點(diǎn)擊分享中不同的按鈕來觸發(fā)）亡笑，暫時還沒有可以自動運(yùn)行的插件侣夷。
舊版 Safari 的分享 菜單同樣被基于 JavaScript 的插件所替代。比如說添加到桌面如今就是一段 Safari 中的 js 代碼仑乌。
除了蘋果在WWDC上演示的功能百拓，Safari的這個改進(jìn)意味著瀏覽網(wǎng)頁會有極大的體驗(yàn)改善。比如說你可以在Safari直接調(diào)用1Password或者LastPassword 保存的帳號密碼登錄绝骚，如果你的iPhone 有 Touch ID指紋識別，你甚至可以直接指紋驗(yàn)證登錄祠够。
Pocket.com 已經(jīng)聲明即將推出針對 iOS 8的插件压汪。
前端和設(shè)計(jì)師的福利
這次safari新增了很多html5，css3的支持
- CSS Shapes
- CSS object-fit
- CSS Background Blend modes
- word-spacing
- CSS Compositing and Blending
- Subpixel layout 支持小數(shù)點(diǎn)
- Animated PNG supported APNG格式圖片
- Parallax effects and Pull-to-refresh supported （與Scroll事件相關(guān)）
- SVG Fragments Identifiers (for SVG Sprites)
- Image Source Set support
- HTML Template support
Animated PNG
APNG格式是PNG位圖動畫的拓展古瓤，但未獲得PNG組織官方的認(rèn)可止剖，與GIF有點(diǎn)類似（只不過GIF是基于JPG的）腺阳，這意味著我們可以制作32位全彩半透明的動態(tài)圖。
滾動時差與下拉刷新
如果你做過移動端的項(xiàng)目穿香，你一定知道iOS7以及以前都不支持scrooll事件亭引，iOS 8 終于支持滾動事件，這下大家終于可以在iOS上用到視覺滾差相關(guān)的js和css了皮获，但是不保證完全適配焙蚓。
這個支持讓我們可以做出下拉刷新和無限下拉下載的效果。
小數(shù)點(diǎn)單位
Safari現(xiàn)在CSS單位從整數(shù)轉(zhuǎn)成了浮點(diǎn)數(shù)洒宝。這意味著CSS對象模型中諸如offsetTop和ClientWidth可能會取得小數(shù)值购公，之前老的iOS都會返回整數(shù)值。
與此同時雁歌，這也意味著你可以用半個像素單位了宏浩。
div {
border-width: 0.5px;
}
SVG 片段標(biāo)識
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方面新出的一個功能乏盐。在他們的網(wǎng)站上你能看到演示的DEMO和文檔佳窑。
從Adobe官網(wǎng)的例子演示來看，似乎變形是生效了丑勤，合成并沒有生效（我Mac Chrome也沒生效）华嘹。
CSS 形狀
CSS 形狀也是Adobe新出的一個特性。對于這個特性法竞，推薦下W3Cplus上的《CSS Shapes 101》耙厚。個人還是很看好這個特性的推廣和應(yīng)用的，能給我們的網(wǎng)頁設(shè)計(jì)帶來更多的可能性岔霸。
Image Source Set
有了解響應(yīng)式圖片的開發(fā)者對這個應(yīng)該不陌生薛躬，隨著高清屏的普及，針對不同的分辨率做適配是一個需要注意的問題呆细，蘋果iOS 8 支持Image Source Set Spec型宝，意味著可以在<img>標(biāo)簽中使用新的屬性。
<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（不會被瀏覽器解析）指巡，實(shí)際應(yīng)用中，我們可以利用<template>中的代碼創(chuàng)建一個新的node隶垮。
視頻增強(qiáng)
這次更新對視頻播放相關(guān)的增強(qiáng)了許多藻雪，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"瑰排，可以讓瀏覽器觸發(fā)loadedmetadata事件方便開發(fā)者控制行瑞。
CSS 分層
我可以通過css控制其他元素放在<video>之前伞广。
iOS 8 JavaScript相關(guān)
- 部分支持
ECMAScript 6,包括Promises,Iterators,Maps,For-of,Weak Maps等等邢享。 - 后臺運(yùn)行：JavaScript會在后臺繼續(xù)運(yùn)行（哪怕已經(jīng)切換了窗口甚至Safari切換到后臺鸳劳，但是計(jì)時器 times 下降到1s的頻率）筋讨。
- 支持
scroll事件：不多說了尘执，上面介紹過礼搁。 - Unprefixed Page Visibility AP ： 我沒搞懂這個是什么（哪位知道求指導(dǎo)）
- 移除
window.doNotTrack - 支持
window.currentScript
9月18更新:
有開發(fā)者發(fā)現(xiàn)：iPhone 5上的click事件300ms延遲已經(jīng)取消了（只是Safari）瀑构，但是其他設(shè)備上的Safari和 WebViews 上還有葫掉，延遲依舊在 iPod touch, iPads 和iPhone 5s上些举。
Bug和存在的問題
說了iOS8和iPhone 的更新，再來說說目前發(fā)現(xiàn)的 Bug俭厚。
不支持文件上傳；骸！挪挤！所有的文件上傳都失效了叼丑，你能選擇或者拍張照片，但是js不能獲得任何數(shù)據(jù)扛门。
HTML或者XMLHttpRequest的POST請求也不行鸠信。但是這個問題但是在桌面啟動的app沒發(fā)生。WKWebKit：在新的引擎不能讀取本地文件是個大問題论寨，所以對于混合app來說星立，還得使用老的
UIWebView。window.prompt可能會導(dǎo)致Safari崩潰附件:語音在
input和labels輸入時葬凳，不管用绰垂。(當(dāng)輸入的時候，label不再發(fā)音)桌面app的
iframes中,touch事件沒有被監(jiān)測到火焰。手機(jī)休眠后劲装，桌面app中的
Timers和requestAnimationFrame回調(diào)沒有執(zhí)行。
譯者言
iOS 8給web前端帶來的變化還是很令人欣喜的荐健，更強(qiáng)大的性能酱畅，更強(qiáng)大的瀏覽器和內(nèi)核，更開放的接口江场，可以預(yù)見在針對iOS的web應(yīng)用會有一個更大的用武之地纺酸。
文章很長，大量技術(shù)詞匯址否，翻譯了半天餐蔬，若譯文有錯誤或者不妥之處，歡迎指正和提供建議佑附。
