萬盛學電腦網 >> 網頁制作 >> 交互設計 >> WEB工程師和設計師必學的10個IOS 8新鮮改變
WEB工程師和設計師必學的10個IOS 8新鮮改變
@羅羅磊磊 ：喜大普奔，喜極而泣，隨著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圖標大小和登錄頁的圖片大小。
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，則需要在<head>中加上這段
<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
表單自動填寫和信用卡掃描功能
Safari如今支持自動補全表單，並且當Safari檢測到你要填寫的是信用卡的時候他會允許你開啟攝像頭直接掃描實體信用卡。
於此同時，Safari也支持autocomplete屬性，參考 latest spec。這意味著如果你在一個登錄頁面，Safari可以調用Keychain裡的數據自動填寫用戶名帳號、密碼。Luis Abreu寫過一篇關於iOS 8安全和隱私相關的文章，推薦可以看看：https://lmjabreu.com
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剛剛我測試了下沒有）
- 上一頁:20個簡單暢快的“全景式”網站布局欣賞
- 下一頁:26個優雅的藍色網站設計
