隨著iPhone 6和iPhone 6 plus的上市，ios8系統(tǒng)已經(jīng)全面進入我們的移動生活。

大家對于ios8系統(tǒng)的使用習慣和新增功能都有褒貶不一的看法。

而今天，25學堂重點跟大家來講解一些對于web前端來說，對于我們開發(fā)webAPP有哪些改進和設計規(guī)范。

請大家看清楚了，今天25學堂分享的是 webAPP的適配iphone6 的技巧 不是 APP設計適配問題。移動APP設計和webAPP設計中的六個小技巧

最新的iOS產(chǎn)品的尺寸如下圖：

注釋：綠色的眼睛代表產(chǎn)品采用的是Retina視網(wǎng)膜技術

第一點：ios8帶來了9個變化：

1、iPhone 6 和 iPhone 6 Plus

2、新 Api 支持

3、Safari 新功能和支持

4、iOS 8 原生優(yōu)化

5、Safari 插件

6、全新的視覺APP設計

7、視頻增強

8、iOS 8上的JS

9、解決了ios7上的一些Bug 和問題

第二個：跟我們web前端息息相關的就是 瀏覽器。

? ? ios上的Safari新功能詳解

1、支持HTML5新APIs: WebGL (3D canvas), IndexedDB, Navigation Timing API， Crypto API

2、混合應用: 更快的、優(yōu)化的WebView

3、支持滾動 Scroll 事件:終于支持了！

4、視頻播放: 全屏API，元數(shù)據(jù)API

5、支持HTML模板元素

6、Safari 插件:原生App可以以插件的形式讀取網(wǎng)頁DOM

7、圖片:支持Image Source Sets和動態(tài)PNG APNG

8、CSS：支持Shapes，支持小數(shù)單位

9、瀏覽器自動填寫表單（支持信用卡調(diào)用攝像頭掃描）

10、網(wǎng)頁和本地應用交互：登錄數(shù)據(jù)共享

11、EcmaScript 6 ：部分支持

12、SPDY:支持谷歌家的新網(wǎng)絡協(xié)議了

13、文件上傳失效了(這是Bug)

14、移除了minimal-ui屬性

15、支持Yosemite上的遠程調(diào)試

相比其他移動端上的瀏覽器，iOS 8并沒有支持有些功能：

dp單位的?Media queries

getUserMedia:訪問本地硬件設備，捕獲音頻和視頻的Api

WebRTC:網(wǎng)頁即時通信

@viewport 聲明

Datapst

WebP圖片

第三個：物理顯示尺寸不在是320，最大可達414啦。

尺寸 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?4”? ? ? ?? ? ? ? ? ?4.7” ? ? ? ? ? ? ? ? 5.5”

Viewport’s device-width (in CSS pixels) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?320 ? ? ? ? ? ? ? ? 375 ? ? ? ? ? ? ? ? ? 414

Viewport’s device-width (Android設備同分辨率參考) ? ? ? ? 360? ? ???? ? ? ? ? 360 ? ? ? ? ? ? ? ? ? 400

Device Pixel Ratio 像素比 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?2 ? ? ? ? ? ? ?? ? ? ?2 ? ? ? ? ? ? ? ? ? ? ? 3

Rendered Pixels 渲染像素 (默認 viewport size * dpr)

640x1136 ? ? ? ? ? 750×1334 ? ? ? ? 1242×2208

Physical pixels 物理像素（手機顯示像素）

640x1136 ? ? ??750×1334 ? ? ? ? 1080×1920

下面這些參數(shù)都是跟之前進行webAPP的設計的尺寸都是一致的。

Status Bar?狀態(tài)欄高 (px) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?40 ? ? ? ? ? ? ? ? ? 40 ? ? ? ? ? ? ? ? ? ? 60

即我們的webAPP的height高度等于：20px

Title Bar ??導航條高?(px) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 88 ? ? ? ? ? ? ? ? ? 88 ? ? ? ? ? ? ? ? ? ? 132

即我們的webAPP的height高度等于：44px

Tab Bar ??底欄高?(px) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 98 ? ? ? ? ? ? ? ? ? 98 ? ? ? ? ? ? ? ? ? ? 147

即我們的webAPP的height高度等于：49px

桌面 icon ?(px) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 120 ? ? ? ? ? ? ? ? 120 ? ? ? ? ? ? ? ? ? 180

即我們的webAPP的圖標大小等于：60px*60px 也就是Safari打開一個webAPP站點，分享的時候，我們創(chuàng)建一個主屏幕的圖標大小。

圖片資源后綴名 ? ? ? @2x ?? ? ? ? ? ? ?@2x ? ? ? ? ? ? ? ? ?@3x

這樣做是遵循ios 開發(fā)的命名方式。第二個是方便與native webapps統(tǒng)一管理圖片資源。

所有的 iPhone 和 iPod 使用的都是320px的屏幕寬度。iPhone 6 和 Plus 相比前代更加寬，給我們帶來了更多的空間，蘋果終于決定加寬瀏覽器寬度了。

但是蘋果奇葩的是使用了一套特殊的屏幕像素值。

然而：大部分4.7~5寸的安卓設備的viewport寬設為360px， ? ? ?iPhone 6上卻是375px，

大部分5.5寸安卓機器（比如說三星Note）的viewport寬為400， ? iPhone 6 plus 上卻 ? ? ? ? ? ?是十分怪異的414px。

所以，我們在設計和制作webAPP的時候，按照如下幾個步驟做一些調(diào)整。

我們先來看看最新iphone的一些物理顯示參數(shù)。

最后這個需要重點記?。?

iphone6 以前的都是2倍。唯獨iphone6 plus 是3倍。

iphone5 之前都是320*2=640px的寬度

iphone6設計尺寸：375*2=750px 寬度

iphone6 plus ?設計尺寸是414*3=1242 或者1240px等。

如果你只要設計一套界面：建議你設計iphone6的尺寸為基礎，然后用css來進行縮放。這樣webAPP的顯示效果是清楚的。不然那些圖片都會顯示很模糊。

桌面圖標大小適配

iOS特有的圖標大小，在 iPhone 6 plus上是180×180，iPhone 6 上則還是老的120×120。

適配iPhone 6 plus，則需要在中加上這段：

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

啟動圖的兼容性

如果你的webapp有一個啟動圖，那么你又得增加兩行代碼適配新 iPhone 了。

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

<pnk rel="apple-touch-startup-image" href="launch6.png" media="(device-width: 375px)"><pnk rel="apple-touch-startup-image" href="launch6plus.png" media="(device-width: 414px)">