[IOS_HTML5]IOS7下HTML5的各類坑

時間 2019-11-17

標籤 ios html5 html ios7 各類欄目 iOS 简体版

原文原文鏈接

這些天 Apple 已經推出了 iOS 7 以及 iPhone 5S 和 iPhone 5C 。Apple 面向 web 開發者僅僅發佈了 10% 的所需信息，我能夠說這是自 1.0 以來，bug 最多的 Safari 版本嘛。文本我將介紹新的 API 和特性，以及若是你有網站或 webapp ，立刻須要處理的大多數問題。php

簡而言之css

沒有時間讀這篇長文？html

UI 變化：工具欄色彩，新的全屏導航問題，新的主屏圖標尺寸；iPhone 未使用 <title>；可能與新手勢衝突。
新設備：對 web 開發者而言沒有任何新東西，跟 iPhone 5 相同。
HTML 5 標籤：視頻軌道，<progress>，移除對 input type=datetime 的支持。
HTML 5 API ：Page Visibility（頁面可見性），AirPlay API，canvas 加強，移除對共享 Workers 的支持，Web Speech 綜合 API，無前綴的 Web Audio 和 Animation Timing， Mutation Observer 和其它小調整。WebSQL 使用超過 5Mb 的大問題。
CSS ：Regions，Sticky 定位， FlexBox，ClipPath，無前綴的 Transitions 和其它優化。
主屏 webapps ：一些嚴重的問題（好比，不支持 alert ！）
原生 webapps ：Web View 分頁，原生 app 的 JavaScript 運行時，以及視頻播放新功能。

新瀏覽器html5

Safari ，像其它原生應用同樣，在用戶界面和體驗方面已經迎來大幅更新。這些變化會影響用戶與網站的交互，以及 webapp 的反應。jquery

工具欄色彩ios

Safari 的工具欄已經着色（iPhone 上的 URL 條和底部工具條），顏色基於：
a) 加載頁面時的背景色
b) 當滾動頁面時，工具條後面的當前主色web

若是你想「hack」初始顏色，與 body 背景不一樣，並不須要往 HTML 裏面加無用的東西（好比新容器），僅需使用下面的 CSS hack:數據庫

[color=rgb(88, 110, 117) !important]1[color=rgb(88, 110, 117) !important]2[color=rgb(88, 110, 117) !important]3[color=rgb(88, 110, 117) !important]4

body {background-color: blue; /* 用於着色 */background-image: linear-gradient(to bottom, green 0%, green 100%); /* 用於 body */}

咱們定義了背景色和背景圖像；內容將用圖像（本例是漸變，也能夠是 data URI 1px 圖像）。如下例子，前兩個用了一樣的顏色（僅用背景），最後一個工具欄顏色和 body 顏色不一樣。編程

全屏和 HTML 5 應用、遊戲的大問題canvas

現在 iPhone 和 iPod touch 上的網頁瀏覽老是全屏。當用戶在垂直模式（portrait ）滾動頁面時，底部工具欄將消失，URL 欄變成一個小的半透明的條出如今頂部。水平模式（landscape），用戶滾動頁面底部工具欄和主域名欄同時消失，變成完整的全屏模式。

工具欄和完整的 URL 欄將再次出現：
1) 用戶輕擊頁面頂部，或者
2) 用戶把頁面滾回頂部

下面圖片顯示了水平和垂直模式，滾動頁面先後的 UI 變化：

問題是：

當工具欄出現/消失時，resize 事件不會觸發
咱們沒法探測 JavaScript 或者 media queries 的變化
老技巧 window.scrollTo 隱藏地址欄再也不工做；所以，沒有用戶介入滾動頁面，沒有辦法隱藏地址欄或工具欄了。
若是沒有使用原生的滾動，會遇到問題（細節見下面）。
9月19日更新: canvas 底部沒法交互（細節以下）

若是你使用「非原生」的滾動佈局，好比 iframe，overflow:scroll ，或者基於 JavaScript 的滾動組件，工具欄永遠不會隱藏。更大的問題是，用戶一旦進入全屏模式，將沒法返回正常模式。好比，以水平模式看 Twitter 網站（使用 overflow:scroll），滾動區域少於屏幕的 50%時，工具欄不再會消失。

說實話，若是你從垂直模式切換到水平模式，有時會變成全屏沒法滾動，可是你沒法避免。你須要測試它們找到解決辦法。

滾動出現工具欄的問題一樣出如今 HTML5 遊戲。Beta 1 期間, Apple 論壇就有許多人反饋這個問題，好比：

Richard Davey：對咱們而言這的確是個問題，咱們 BBC 網站上的全部遊戲顯示都出了問題（試下上面的全部例子）。移除了全屏按鈕，廢棄了’hack’，咱們沒法讓遊戲全屏。遊戲擠在 iPhone 瀏覽器中間的一個小窗口。(…) 水平模式打開頁面，僅有 2/3 的屏幕可用，控制區域佔用了 1/3 的屏幕。(…)
TheFlashGuy：在水平模式，咱們須要控制瀏覽器工具欄的顯示/隱藏。用戶點擊屏幕頂部或底部，太容易進入這個模式了，此模式破壞了許多網站和 web app，由於它們主要的 ui 導航元素習慣放在內容區域的頂部或底部。

「你的網站沒法得到真正的全屏體驗。這點反而成了 iOS 6 喜人的一面了，失去這點是主要的倒退。Richard Davey」

底部工具欄和交互元素（9月19日更新）

一旦進入全屏模式，頁面底部就不可交互。此問題影響到全屏模式（滾動之後）視口底部的任何工具欄，連接或者表單項。好比，底部固定的工具欄。

當你點擊視口的這部分，僅僅觸發了全屏駁回動做。所以，Safari 工具欄出現，須要再次點擊交互項觸發動做，所以兩次點擊才觸發一個按鈕。能夠在這測試，滾動而後點擊底部工具欄。

好比，你想點擊相冊下一張圖片，僅僅打開了 Safari 工具欄，你須要再次點擊相冊執行相應操做。

標題

下一個巨大的變化是 iPhone 的 Safari UI 的 title 標題區域。iPhone 的頁面標題被當前的域名取代（見下圖），頁面標題只在瀏覽選項卡時可用。

「在 iPhone iOS 7 上，當用戶瀏覽網頁時，頁面的 <title> 將被忽略。」

iPad 沒有全屏模式；工具欄和標題欄老是可見。

添加到主頁按鈕

整個 UI 已經改變，包括新圖標取代分享圖標，所以每一個網站都推薦用戶添加到書籤，或者添加到主屏，它們須要更新圖標。

手勢

操做系統和 Safari 現在提供新的手勢，若是你本身檢測手勢的話，新手勢可能影響你的網站。

A) 控制中心：當你從屏幕底部向上滑時出現。這一版，因爲全屏，屏幕底部多是網站的一部分，而不是 Safari 工具欄。所以，建議用戶從 canvas 的底部向上滑時，須要多加當心。
B) 歷史手勢：第二個可能有問題的手勢是從邊界左滑，右滑；Safari 將觸發瀏覽歷史的後退和前進動做，像 Windows 8 模式的 IE。若是你引導用戶左滑或右滑，而且邊緣沒有一點邊距的話，歷史手勢可能與網站手勢發生衝突（不過說實話，Chrome 存在一樣的問題）。

在單頁 webapp （Safari 內）中，當使用 History API 或者 hash 技術管理應用狀態時，此問題至關嚴重。當用戶使用後退手勢時，他將看到同一應用的兩個圖像，但是用戶在同一個應用中。當你使用 side-by-side （並排）滾動手勢時，好比 Yahoo! 主頁，若是用戶從邊界觸發手勢（它甚至觸發了 touch 事件），可能有使用問題：

當用戶手勢返回時，手勢和回退動畫（向右滑）也會跟一些 UI 框架發送衝突，好比 jQuery Mobile 或者 Sencha Touch，兩種動畫都會渲染（瀏覽器動畫，而後是框架動畫）。此外，當前一頁在左側並滾動到特定位置，滑動動畫的快照是正常的，可是頁面從頂部加載，並未保持原來的滾動位置。

沒有辦法阻止這些手勢，由於它們是由 OS （操做系統）或者瀏覽器自身管理的。

很是但願，歷史手勢在主屏 webapp 或 UIWebViews （好比 PhoneGap 應用）上是禁用的。

圖標尺寸

在 7.0 中，新的系統圖標比前一版本大 5% ，好比在 Retina iPhone 設備用 120x120 代替先前的 114x114 。現在，系統圖標也變成扁平化，再也不須要閃亮的效果，所以咱們可能想更新圖標匹配新設計。咱們能夠用一樣的帶新尺寸的 apple-touch-icon link 。

apple-touch-icon precomposed 版仍舊支持，只不過圖標沒有閃亮的效果了。若是咱們定義兩種，precomposed 版優先。

iOS 7 可用的圖標尺寸是：
* iPhone / iPod Touch 視網膜屏: 120x120
* iPad 非視網膜屏（iPad 2 和 iPad mini）: 76x76
* iPad 視網膜屏: 152x152

咱們須要記住全部非視網膜屏的 iPhone-因子設備沒法使用 iOS 7 。若是咱們沒提供新的圖標尺寸，設備還會用 iOS 6 相關的圖標。若是咱們想覆蓋全部可能的 iOS 圖標，使用下面的代碼：

[color=rgb(88, 110, 117) !important]1[color=rgb(88, 110, 117) !important]2[color=rgb(88, 110, 117) !important]3[color=rgb(88, 110, 117) !important]4[color=rgb(88, 110, 117) !important]5[color=rgb(88, 110, 117) !important]6[color=rgb(88, 110, 117) !important]7[color=rgb(88, 110, 117) !important]8[color=rgb(88, 110, 117) !important]9[color=rgb(88, 110, 117) !important]10[color=rgb(88, 110, 117) !important]11[color=rgb(88, 110, 117) !important]12[color=rgb(88, 110, 117) !important]13[color=rgb(88, 110, 117) !important]14

<link rel="apple-touch-icon" href="icon57.png" sizes="57x57"><link rel="apple-touch-icon" href="icon72.png" sizes="72x72"><link rel="apple-touch-icon" href="icon76.png" sizes="76x76"><link rel="apple-touch-icon" href="icon114.png" sizes="114x114"><link rel="apple-touch-icon" href="icon120.png" sizes="120x120"><link rel="apple-touch-icon" href="icon144.png" sizes="144x144"><link rel="apple-touch-icon" href="icon152.png" sizes="152x152">

書籤和收藏夾

書籤也用了新圖標（看下面左側的圖），貌似沒法修改這些圖標和文字。

當你點擊地址欄時出現收藏夾（下面右側圖），看起來像是用了 apple-touch-icon link ，可是沒有遵循任何尺寸原則，而且我發現了怪異現象，好比一些帶正確的 link 元素的網站，收藏夾卻不顯示圖標。XXXX

新設備

過幾天，iPhone 5S 和 iPhone 5C 就能夠在市場上買到了，從 web 開發的觀點看，好消息是它們確實跟 iPhone 5 如出一轍。一樣的屏幕尺寸，一樣的像素密度，一樣的功能。它們也許快一些，可是從編碼的角度，徹底沒必要擔憂。

新的 Touch ID 特性（指紋識別），網站還沒法使用，以 JavaScript 開發者的觀點看，64位 CPU 不會改變什麼。也就是說，iOS 模擬器有能力模擬 64位 CPU。

HTML5 標記支持視頻軌道

HTML5 video 元素如今支持 track 子元素，用於subtitles （字幕）或者關閉 captions （解說字幕）。支持多語言，能夠經過視頻播放器的一個選擇器選擇它。用戶能夠改變語言，或者在軌道選擇器禁用 captions （解說字幕）。

對於全部可能的軌道類型（kind 屬性），僅支持 captions（解說字幕）和 subtitles（字幕），咱們必須在 srclang 屬性以 ISO 格式（好比 English 是 en）定義語言。當用戶能夠聽到聲音但不理解語言時，字幕很是有用。當用戶沒法聽到聲音時，解說字幕頗有用，它包含了當前發生狀況的額外信息（好比背景音樂正在播放）。

定義軌道的 label 屬性毫無價值，由於 iOS 忽視它，若是 kind 值使用 captions 代替 subtitles ，菜單中帶有可選的 CC 後綴的語言名取代了 label。

[color=rgb(88, 110, 117) !important]1[color=rgb(88, 110, 117) !important]2[color=rgb(88, 110, 117) !important]3[color=rgb(88, 110, 117) !important]4[color=rgb(88, 110, 117) !important]5

能夠經過 JavaScript API 訪問軌道，咱們能夠遍歷全部軌道文件。這點可能僅對 iPad 有用，在 iPad 上，咱們能夠在 web canvas 裏真正嵌入一段視頻，iPhone 上永遠是全屏模式。

track 元素遵循跨域策略，默認狀況，視頻和軌道必須是同源。使用 JavaScript 能夠探測 track 是否可用，用到 webkitHasClosedCaptions ：

[color=rgb(88, 110, 117) !important]1

var hasCC = document.querySelector("video").webkitHasClosedCaptions;

還能夠經過 webkitClosedCaptionsVisible （布爾屬性）改變每一個 video 元素的 captions （解說字幕）的可見性。

字幕樣式

iOS 7 支持新的 ::cue 僞元素，咱們僅能夠改變 text-shadow, opacity 和 outline。全部其它屬性好比顏色和字體樣式不支持。

[color=rgb(88, 110, 117) !important]1

::cue { opacity: 0.8 }

更多關於 Track 元素和 API （記住 Safari 並不是支持全部 API）。

PROGRESS 和 OUTPUT 元素

已支持 <progress> 元素，基於 max 和 value 建立進度條。如同其它瀏覽器，不支持模糊進度，當咱們知道明確的進度值時才適用。

[color=rgb(88, 110, 117) !important]1

已支持 <output> 元素，沒感受有什麼特別。

貌似支持 <meter> ，全部內容會被忽略，我感受有 bug 。

移除：datetime input type

追隨 Google Chrome ，iOS Safari 再也不支持 datetime 的 input 類型，它將退化成 text 。這個類型將被標準廢棄，標準同意使用兩個 input ， date 和 time 達到一樣的目的。問題是 datetime 兼容 iOS 5.0 至 iOS 6.1 ；若是使用它要多加當心！

week input 類型仍沒支持，回退成 text 類型，渲染成一個不可交互的控件。

「若是你正在使用 input type=’datetime’ ，你應該立刻採起行動，由於它被渲染成 text 類型。」

無縫 iframe

在 iOS 7 上，新的布爾屬性 seamless 用於建立無邊界的 iframe 。iframe 將沒有滾動條，默認狀況，它會取到內部內容的高度，做爲 DOM 中其它塊級元素的使用空間。

[color=rgb(88, 110, 117) !important]1

HTML5 JavaScript API

先以壞新聞開頭：未支持 WebGL，FullScreen，WebRTC， getUserMedia 或者 IndexedDB 。

可用的新 API ：

Page Visibility API
XHR 2.0 徹底實現
Video tracks API (已覆蓋)
AirPlay API
CSS Regions API
Canvas 加強
移除對 Shared Workers （共享 Workers ）的支持
WebSpeech 合成 API

iOS 7 的 Page Visibility API 帶有 -webkit- 前綴，用於探測 tab 標籤在前臺仍是後臺。你能夠測試這個 demo 。XMLHttpRequest 2.0 規範徹底兼容意味着咱們能夠把 ’blob’ 做爲響應。Video tracks API 已經快速覆蓋，意味着咱們能夠檢索和導航全部媒體元素的全部軌道內容。

CSS Regions API 做爲 CSS Regions 規範的一部分，主要帶前綴的 webkitGetFlowByName 函數對每一個 DOM 元素均可用。

Canvas 2D Drawing API，canvas context 如今有 globalCompositeOperation 屬性，當繪製不一樣的層時，咱們能夠定義混合模式（好比正片疊底）。已有新的 Path 構造器，在 canvas context 繪製的路徑能夠保存，用於後期使用，避免直接畫在畫布上。

AirPlay API

AirPlay API 須要解釋。AirPlay 是 Apple 的無線流媒體解決方案，能夠在不一樣設備間傳遞流媒體內容，Apple TV 已經使用。Safari 已經支持 x-webkit-airplay HTML 屬性，用於定義是否使用 AirPlay ，以前咱們沒法經過 HTML5 定製體驗。

API 能夠經過 AirPlay 定製播放器，獲取流的內容和事件。每一個 video 元素都有webkitplaybacktargetavailabilitychanged 和webkitcurrentplaybacktargetiswirelesschanged 。讓咱們見識下不用下劃線，駝峯或者其它方式命名事件有多可怕 :S 。當新的 AirPlay 對象（好比 Apple TV）啓用，或者禁用，第一個事件觸發；當重放狀態改變時，第二個事件觸發。

「我認爲 webkitcurrentplaybacktargetiswirelesschanged 創造了記錄：迄今最長的 JavaScript 事件名。」

若是有個流對象可用，咱們能夠提供一個按鈕，選擇後調用視頻的webkitShowPlaybackTargetPicker 函數。

仍舊沒有官方的 API 文檔，你能夠看這視頻 ‘What’s New in Safari and WebKit for Web Developers’，WWDC 會議的視頻提到了這個話題。

後臺執行

有幾個後臺執行的用例：

若是用戶切換了 tab （標籤選擇屏），你的代碼仍舊執行，可是圖像靜止了
若是用戶切換了應用（多任務模式），你的代碼仍舊執行，圖像更新
若是 Safari 在前臺，你的網站在後端標籤，你的代碼凍結，Safari 有最新執行的快照用於 UI 顯示
Safari 在後臺你的代碼凍結

WebSpeech 合成 API

9月19日更新：API 能起做用，所以是官方支持。

WebSpeech API 可讓網站記錄和轉錄音頻，還能夠把文字合成到聲音中，使用操做系統內部聲音播放。

iOS Safari 僅包含合成 API（文字到語音），沒有從麥克風聽音頻的 API 。使用 speechSynthesis.getVoices() ，你能夠在一個真實設備，查詢全部不一樣語言的可用聲音，它返回 36 種聲音（有時刷新頁面返回 0，感受像 bug ）。在英語方面，使用 en-US 是女聲，使用 en-GB是男聲。在語音識別方面我不是專家，可是感受聲音 API 不一樣於 Siri ，iOS 7 的 Siri 聽起來更天然。

讓 JavaScript 經過你的網站開口說話，可使用默認語言的快捷版，或者定義不一樣的屬性像如下例子：

[color=rgb(88, 110, 117) !important]1

speechSynthesis.speak(new SpeechSynthesisUtterance("Hello, this is my voice on a webpage"));

var speech = new SpeechSynthesisUtterance();speech.text = "Hello";speech.volume = 1; // 0 to 1speech.rate = 1; // 0.1 to 9speech.pitch = 1; // 0 to 2, 1=normalspeech.lang = "en-US";speechSynthesis.speak(speech);

經過 SpeechSynthesisUtterance 對象能夠綁定一些事件，好比 start 和 end ，可是不要在事件內部用 alert ，你的 Safari 將未響應（不要問我爲何）。

能夠說出來的字符串能夠是無格式的文本，標準也支持 SSML 格式（語音合成標記語言）的 XML 文檔，iOS Safari 僅閱讀 XML 。

記住 Speech 合成 API 僅做用於用戶明確的行爲，好比點擊一個按鈕，所以你不能在 onload 或者基於時間座標發起語音。用 iOS 7 設備試試這個在線 demo 。

其它變化

MutationObserver
無前綴的 Animation Timing API （也被稱爲 requestAnimationFrame）
無前綴的 transitionend 事件名
無前綴 URL（?）
無前綴 WebAudio API 及新的高級功能
新的 DOM 屬性 hidden 和 visibilityState
支持 window.doNotTrack

WebSQL bug

使用 WebSQL API ，當建立的數據庫大於 5Mb 時，會有大問題（DOMException）。先前版本，用戶許可限制是 50Mb。由於 bug ，僅僅使用 5Mb ，用戶將收到許可對話框。儘管用戶給予權限佔用更多容量，但它的確是一個很大的 bug。

9月19日更新: 根據紐約時報的 tarobomb ，當你首次建立數據庫，若是請求容量小於 5Mb，而後想存更多數據（大於 50Mb）時，合適的確認框出現（首次 10Mb，而後 25Mb，最終 50Mb），你最終能儲存超過 5Mb 的數據。

CSS 支持

支持新的規範（大部分有 webkit 前綴）：

Sticky 定位
CSS Regions
CSS Grid Layout (not working)
CSS FlexBox
動態字體類型

Sticky 定位

Sticky 定位是新的實驗特性，能夠在視口中固定一個元素，當它的父容器移出可視區域時消失（一般在滾動操做後觸發）。它像是混合定位：當 static 定位元素移出視口時變成 position: fixed 。若是有多個 sticky 元素，它們會彙集到同一區域（定義一樣位置屬性的話），當滾動到相似原生 UITableView 部分時，能夠作個不錯的效果。

9月19日更新：一些報告顯示這一特性在 6.1 就可用了（可是在社區沒有找到資料，所以我在這提一下）。

[color=rgb(88, 110, 117) !important]1

h1 { position: -webkit-sticky; top: 10px; }

你能夠試試這個 demo 。

CSS Regions

CSS Regions 規範是 Adobe 提的，咱們能夠建立相似雜誌設計，經過不一樣的容器排版內容。因爲屏幕尺寸的性質，針對 iPad 網站和 webapp，咱們將使用新的流原理。

在 iOS 上，選擇不一樣區域的內容是不容許的。CSS Exclusions 能夠定義區域的形狀，一般狀況下，它和 CSS Regions 是好夥伴，但它還不可用。

你能夠試試這些在線 demo 。

CSS Grid Layout

CSS Grid Layout 是 W3C 的新佈局規範（由微軟提出，IE 10 已經實現）。全部新的 CSS 屬性（-webkit-grid-X）均可用，但我沒法使用 display: grid 或者 display: -webkit-grid 。我不肯定是否有其它方式啓用它，或者它未徹底實現。

CSS FlexBox

CSS FlexBox 的最終規範出來了，水平/垂直定位元素時，咱們能夠不用浮動和清除浮動了。使用時咱們應該給容器加個 display: -webkit-flex，而後應用不一樣的屬性。

動態字體

iOS 7 支持動態字體這種新字體類型，用於調整粗細，字間距和行距，基於當前字體提高易讀性。咱們能夠把此新特性用於 HTML，使用新的 -apple- 前綴（也許由於 webkit 未來不打算使用前綴？）。有一長串的常量，好比 -apple-system-headline1，-apple-system-body 和 -apple-system-caption1 。

[color=rgb(88, 110, 117) !important]1[color=rgb(88, 110, 117) !important]2

h1 { font: -apple-system-headline1 }p { font: -apple-system-body }

其它 CSS 改進

media queries 的 resolution 屬性仍是沒支持，有些新東西，好比能夠查詢 min-color-index和max-color-index ，雖然沒什麼用吧

還有一些次要更新，包括：

無前綴的 CSS Transitions （和 transitionend 事件）
CSS Clip Path 基於形狀剪裁內容，包括圓形，矩形和多邊形
字體的 Kerning 和 Ligatures 默認啓用
Background 背景屬性更兼容不一樣的值
box-decoration-break: slice/clone
tab-size 樣式
overflow-wrap: normal/hypernate/break-word
支持 ch 和 vmax 單位
mask-type: alpha
新的僞元素 ::cue 在 video 軌道部分已提到
-webkit-background-composite 屬性（可是我試了不得做用）

主屏 webapp

「若是你正在用主屏 webapp ，有個不幸的消息：此平臺的此版本有太多 bug 了。」

惟一的好消息是，當全屏時，貌似沒有 WebSQL 存儲限制了；不須要用戶的許可。

大問題主屏 webapp 有很多大問題：

標準的對話框沒法使用了，好比 alert, confirm 或 prompt 。
webapp 沒法打開外部的 URI ，好比 Safari 裏的網站，打電話，打開 AppStore 等。任何 URI 都會忽略。
若是安裝超過4個 app ，主屏會發生奇怪的事情，好比一個 webapp 取代了另外一個。你會看到一樣 webapp 的副本。同一時間打開不一樣的 webapp 時也發生一樣的事情。在你的設備試試訪問 app.ft.com，安裝 webapp ；到 pattern.dk/sun，安裝 webapp ；重複操做幾回，你會發現主屏亂了。重啓設備貌似能夠解決問題。
垂直模式輸入文本，select 或者日期控件得到焦點，media queries 將把方向變成水平，resize 事件觸發。此狀況出如今主屏 webapp 和 Web Views ，Safari 沒事（bug?）。
9月19日更新：若是使用 Application Cache ，經過 hash 或其它技術管理狀態，歷史對象將不保存你的導航歷史，所以 history.back() 將不起做用，history.length 永遠是 1 。（多謝 10+ 以上的人報告此問題！）
9月19日更新：當你安裝圖標到主屏，你的網站和 webapp 之間的 Cookies 沒法互通（出於身份驗證的目的）。直到 6.1 纔有的功能如今沒有了。（感謝 Joseph Pearson 報告此問題；測試用例在此）

狀態欄

若是你沒有提供 apple-mobile-web-app-status-bar-style meta 標籤，或者你提供了一個默認值，狀態欄將變黑，所以… 屏幕只會有個黑色區域（一些設備僅有電池圖標）。用戶沒法看到狀態欄的時鐘和其它圖標。

黑色值並非 iOS 7 全屏模式的新樣式，若是你定義 apple-mobile-web-app-status-bar-style 的值爲 black-translucent ，它再也不是黑的，遵循 app 全屏模式，它變得徹底透明。不幸的是，貌似沒有辦法定義背景清除仍是黑色，所以咱們須要測試圖標和時間跟背景好很差區分。更新：文字貌似老是白的。

下面的圖片能夠看到默認狀態欄，black 值和 black-translucent 值在 iOS 7 的效果。

啓動圖片和多任務管理

對於新的多任務系統，有主屏 webapp 時，系統用白色圖片，而不是啓動圖片，並非 app 當前狀態的預覽。惟一例外是，當 webapp 仍舊是激活狀態時，你能夠看正確的快照。如下例子，咱們能夠看到 Financial Times webapp 有白色快照，只有當它是激活狀態時纔有正確的啓動圖片。

幸運的是 iPhone 5 的主屏 webapp 沒 bug ，它們是 letterboxing 應用（它被發現後的一年）。咱們再也不須要視口 hack 解決方案了。

原生 webapp 開發

若是你開發 hybrid 混合（原生 webapp ）應用，好比 Apache Cordova (PhoneGap) 應用，有一些消息告訴你。首先，尚未 Nitro 引擎。

Paginate （隨意翻閱）模式

當在原生應用中，使用 UIWebView 實現豐富內容時，或者對於原生 webapp （hybrid），咱們能夠爲了電子書閱讀體驗使用 Paginate （隨意翻閱）特性，避免出現垂直滾動條（相似 Windows 8 應用體驗）。若是應用顯示動態加載內容，這一特性是完美的，咱們不能預先優化分頁。有不一樣的 Objective-C 屬性配置分頁過程。要啓用它，須要這麼作：

[color=rgb(88, 110, 117) !important]1[color=rgb(88, 110, 117) !important]2[color=rgb(88, 110, 117) !important]3

myWebView.paginationMode = UIWebPaginationModeLeftToRight;myWebView.paginationBreakingMode = UIWebPaginationBreakingModePage;myWebView.gapBetweenPages = 50;

這些屬性將把 web view 裏的 HTML 文檔轉換成分頁模式（分紅水平方向頁面）。

其它改進

對於原生開發（不必定使用 Web View），iOS SDK 如今包含了 JavaScript 運行時：JavaScript Core 框架，把 Objective-C 包裝成標準的 JavaScript 對象。咱們能夠用這個框架運行 JavaScript 代碼，解析 JSON 。
Web View 新屬性，HTML 5 視頻如今有了內聯回放模式，代替默認的全屏模式。
Web View 新屬性，在原生 webapp 裏，能夠啓用視頻自動播放。
iOS 7 也有 SafariServices 框架，以編程方式添加 URL 到 Safari 閱讀列表比較有用。

遠程調試

若是你有 MacOS 就能夠和 iOS 設備進行遠程調試，必須更新 Safari 到 6.1 ，更新 iTunes 到 11.1 ，才能和 iOS 7 設備通信。寫此文時，Safari 6.1 僅僅是預覽版。

內部調試的功能和先前版本一致，用戶界面變了許多，設計更簡潔。

還未支持

列表很龐大，所以我列舉一些 Mac 版 Safari 7 公佈的特性，可是 iOS Safari 沒支持的特性：