iPhone5和iOS6上HTML5開(kāi)發(fā)的新增功能

開(kāi)發(fā)移動(dòng)應(yīng)用到底是選擇Native、Web應(yīng)用或者混合應(yīng)用?答案是不同的移動(dòng)應(yīng)用需要不同的技術(shù),選擇合適的就行。其實(shí)大多數(shù)移動(dòng)應(yīng)用,不管是企業(yè)移動(dòng)應(yīng)用還是互聯(lián)網(wǎng)移動(dòng)應(yīng)用,90%都可以使用基于HTML5的Web技術(shù)就足夠。在Android 4.0和iOS 6以上瀏覽器已經(jīng)是最快的應(yīng)用了,比任何本地的微博、微信都快,無(wú)須更新升級(jí),無(wú)須上傳分·裂的APP市場(chǎng),無(wú)須突然被蘋果下架應(yīng)用。再看看最近發(fā)布 Firefox OS 開(kāi)發(fā)手機(jī)的配置也大概知道,運(yùn)行大多數(shù)應(yīng)用不需要那么高配置。
目前主流的智能終端中,iOS6對(duì)HTML5的支持程度仍舊是最好的,領(lǐng)先于Android和Windows phone。隨著iPhone5的性能再次翻倍,以及iOS不斷提升的canvas渲染性能,加之Android的webGL,Win8/wp8的本地api對(duì)Javascript開(kāi)放,性能已經(jīng)不再是開(kāi)發(fā)優(yōu)秀移動(dòng)應(yīng)用的主要屏障,如今要考慮的是如何發(fā)揮HTML5的優(yōu)勢(shì)做出用戶喜歡的應(yīng)用。下面看看iPhone5和iOS6上HTML5開(kāi)發(fā)的新增功能。
iPhone 5:
新的屏幕尺寸 新模擬器 你需要做的 問(wèn)題
iOS 6的新功能:
文件上傳、具有媒體捕捉攝像頭的訪問(wèn)和文件API 網(wǎng)絡(luò)音頻API 本機(jī)應(yīng)用程序集成的智能應(yīng)用橫幅 CSS 3過(guò)濾器 交叉淡入淡出CSS 3 CSS Partial圖片支持 全屏支持 動(dòng)畫計(jì)時(shí)API 支持多分辨率的圖像 Passbook優(yōu)惠券和月票交付 存儲(chǔ)API和Web應(yīng)用程序的變化 本機(jī)Web應(yīng)用程序的Web View的改變 遠(yuǎn)程Web Inspector調(diào)試 更快的JavaScript引擎和其他新功能
iPhone 5
新的iPhone 5,以及自從iPod Touch第5代·開(kāi)始,在Web開(kāi)發(fā)方面有一個(gè)大的變化:屏幕分辨率。 這些設(shè)備具有寬4寸屏幕,WDVGA(廣角雙 VGA)640×1136像素,326 DPI的Retina Display。 這些設(shè)備和iPhone 4/4S一樣具有相同的寬度但高176像素。
新模擬器
包含iPhone 5仿·真器的Xcode4 iOS 模擬器
新的Xcode 4(Mac AppStore )包括更新后的iPhone模擬器。 新版本的iPhone模擬的三個(gè)選項(xiàng):
iPhone:iPhone 3GS,iPod Touch的第一,第三代 iPhone Retina 3.5“:iPhone 4,iPhone 4s,iPod Touch的第·四·代 iPhone Retina 4“:iPhone5,iPod Touch的第5代
新的模擬器還包括取代谷歌地圖的新地圖應(yīng)用程序和Passbook。
你需要為新設(shè)備做的
通常情況下,如果你的網(wǎng)站/應(yīng)用程序進(jìn)行了優(yōu)化,可垂直滾動(dòng),不應(yīng)該有任何問(wèn)題。 同一個(gè)視口(Viewport)中,圖標(biāo)和iPhone 4/4S技術(shù)應(yīng)能正常工作。 但當(dāng)更新了iOS,同時(shí)也更新了Web View:這意味著所有的本機(jī)Web應(yīng)用程序,如PhoneGap/Apache Cordov應(yīng)用程序和偽瀏覽器,如iOS上谷歌瀏覽器也更新了。 但是, 如果您的解決方案是高度相關(guān)的,那么可能有一個(gè)問(wèn)題,看看下面的例子,iPhone 4和iPhone 5的谷歌地圖網(wǎng)站。 由于這是說(shuō)作為一個(gè)恒定的高度,不隱藏狀態(tài)欄,并在底部有一欄空白。
如果你設(shè)計(jì)了一個(gè)特定高度的谷歌地圖。 正如你可以看到的(右圖來(lái)自iPhone 5)有一個(gè)白色的底欄和URL地址欄無(wú)法隱藏,因?yàn)闆](méi)有足夠的內(nèi)容。
如果您使用的是響應(yīng)性的Web設(shè)計(jì),你不應(yīng)該有太多的麻煩,通常情況下,RWD技術(shù)使用的是寬度而不是高度作為條件。
設(shè)備檢測(cè)
在寫這篇文章的時(shí)候,還沒(méi)有iPhone 5在市面上。 沒(méi)有辦法在服務(wù)器端檢測(cè)iPhone 5 。 用戶代·理只有iOS 6系統(tǒng)的iPhone,以及使用完全相同的用戶代·理的iOS6系統(tǒng)的iPhone 4S和iPhone 5。
Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A403 Safari/8536.25
因此, 客戶端檢測(cè)4寸iPhone設(shè)備唯一的方法來(lái)是使用JavaScript或媒體查詢。請(qǐng)記住,這些器件具有1136像素的高度,但我們所談?wù)摰腃SS像素(獨(dú)·立分辨率像素)約568像素高度,為這些設(shè)備像素的一半。
isPhone4inches = (window.screen.height==568);
使用CSS媒體查詢和響應(yīng)性Web設(shè)計(jì)技術(shù),我們可以檢測(cè)到iPhone 5使用:
@media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) {
/* iPhone 5 or iPod Touch 5th generation */
}
主屏幕的webapps
主屏幕的webapps問(wèn)題似乎是很嚴(yán)重的。 我已經(jīng)報(bào)告了這個(gè)問(wèn)題,在NDA還沒(méi)有來(lái)自蘋果的任何答案。
當(dāng)你添加一個(gè)網(wǎng)站的首頁(yè)到屏幕,支持apple-mobile-web-app-capable元標(biāo)簽的web應(yīng)用只工作在iPhone 3.5“仿·真模式(它不考慮整個(gè)高度)。
在圖像里能看到黑欄條。 這是iPhone 5和新iPod Touch默認(rèn)情況下全屏幕webapp。
如果操作系統(tǒng)是不確定是否支持更寬的屏幕,不給web應(yīng)用擴(kuò)展高度是一個(gè)好主意。 如果你提供一個(gè)apple-touch-startup-image為640×1096,iPhone 5將它調(diào)整大小為640×920放在主屏幕。
解決方案是, 你需要忘記viewport的width=device-width or width=320。 如果不提供viewport,webapps將正常工作。 同樣的,如果你使用其他屬性而不是寬度也類似,如果你不希望viewport默認(rèn)980px,可以這樣:
<meta name="viewport" content="initial-scale=1.0">
甚至如果指定一個(gè)不同于320寬可以這樣:
<meta name="viewport" content="width=320.1">
不動(dòng)viewport,下面的腳本也可以達(dá)到目的:
if (window.screen.height==568) { // iPhone 4"
document.querySelector("meta[name=viewport]").content="width=320.1";
}
如果程序啟動(dòng)圖像為640×1096,并在不同的設(shè)備上使用不同的圖像,你可以使用媒體查詢。 一些報(bào)道說(shuō),你需要將啟動(dòng)圖片象本機(jī)程序一樣命名為“Default-568h@2x.png”但不正確。 不過(guò)你想要的話,可以將它命名。 但大小屬性被完全忽略。
您可以使用媒體查詢,提供不同的啟動(dòng)圖片:
<link href="startup-568h.png" rel="apple-touch-startup-image" media="(device-height: 568px)">
<link href="startup.png" rel="apple-touch-startup-image" sizes="640x920" media="(device-height: 480px)">
如果你想為低分辨率設(shè)備提供了另一種版本,那么你可以使用WebKit的設(shè)備像素比的條件了。 如果你想知道為什么是568px而不是1136px,記住我們使用的CSS像素和這些設(shè)備的像素比為2。
另一個(gè)問(wèn)題是,購(gòu)買了新設(shè)備后, iTunes將是否再次從備份安裝快捷方式圖標(biāo),這是不明確的
iOS 6和HTML5的開(kāi)發(fā)
iOS 6是為每一個(gè)iOS 5設(shè)備免費(fèi)提供更新的,除了iPad第一代,所以我們會(huì)看到這個(gè)版本瀏覽網(wǎng)頁(yè)真的很快,iPad的市場(chǎng)被第一次分割。 下面的調(diào)查結(jié)果是可用于所有iOS升級(jí)iOS設(shè)備。
文件管理問(wèn)題
iOS 6 上的 Safari 瀏覽器支持的文件上傳并且有HTML Media Capture的部分支持。 一個(gè)簡(jiǎn)單的文件上傳,會(huì)要求用戶從相機(jī)或相冊(cè)里輸入一個(gè)文件,你可以在圖中看到。 我真的很喜歡Safari顯示圖片預(yù)覽,而不是一個(gè)臨時(shí)文件名。
<label>Single file</label>
<input type="file">
我們也可以使用HTML5新的布爾屬性請(qǐng)求multiple文件。 在這種情況下,用戶可以不使用相機(jī)作為源。
<label>Multiple files</label>
<input type="file" multiple>
我們可以使用文件上傳訪問(wèn)攝像頭和相冊(cè)
雖然沒(méi)有辦法強(qiáng)制使用攝像頭, 但我們可以使用accept屬性只指定想捕捉的圖像或視頻。
<input type=file accept="video/*">
<input type=file accept="image/*">
不支持其他類型的文件 ,如音頻,Pages文檔或PDF文件。 也沒(méi)有g(shù)etUserMedia攝像頭的實(shí)時(shí)流媒體支持。
有圖片和視頻選擇后你能做什么呢?
使用multipart POST表單提交上傳 使用XMLHttpRequest 2 AJAX上傳(甚至進(jìn)度支持) 使用文件API ,在iOS 6允許JavaScript直接讀取的字節(jié)數(shù)和客戶端操作文件。 HTML5ROCKS 有一個(gè)很好的API例子。
網(wǎng)絡(luò)音頻API
HTML5游戲開(kāi)發(fā)商應(yīng)該是喜歡! 網(wǎng)絡(luò)音頻API在移動(dòng)瀏覽器第一次出現(xiàn)。 這個(gè)JavaScript API允許我們處理和合成音頻。 如果你從來(lái)沒(méi)有玩過(guò)一些低級(jí)別的音頻,API可能看起來(lái)有點(diǎn)怪異,但一段時(shí)間以后就不難理解了。 同樣,HTML5ROCKS有一個(gè)好文章使用音頻API上手。
API更多的信息和消息在 http://www.html5audio.org
智能應(yīng)用程序橫幅
網(wǎng)站還是本機(jī)應(yīng)用程序? 如果我們都有,現(xiàn)在我們可以將我們的網(wǎng)站與我們的本機(jī)應(yīng)用程序連接 。 有了智能應(yīng)用程序橫幅,當(dāng)網(wǎng)站上有一個(gè)相關(guān)聯(lián)的本機(jī)應(yīng)用程序時(shí),Safari瀏覽器可以顯示一個(gè)橫幅。 如果用戶沒(méi)有安裝這個(gè)應(yīng)用程序?qū)@示“安裝”按鈕,或已經(jīng)安裝的顯示“查看”按鈕可打開(kāi)它。 我們也可以從網(wǎng)絡(luò)發(fā)送參數(shù)給本機(jī)應(yīng)用程序。 例如打開(kāi)與用戶在網(wǎng)站上看到內(nèi)容相同的本機(jī)應(yīng)用程序位置。
要定義一個(gè)智能應(yīng)用程序橫幅,我們需要?jiǎng)?chuàng)建一個(gè)meta標(biāo)簽, 名稱=“apple-itunes-app”。 首先,我們需要去iTunes Link Maker搜索我們的應(yīng)用程序和應(yīng)用程序ID。
<meta name="apple-itunes-app" content="app-id=9999999">
我們可以使用 app-argument 提供字符串值,如果我們參加的iTunes聯(lián)盟計(jì)劃,我們還可以添加子公司相同的元標(biāo)記數(shù)據(jù)
<meta name="apple-itunes-app" content="app-id=9999999, app-argument=xxxxxx">
<meta name="apple-itunes-app" content="app-id=9999999, app-argument=xxxxxx, affiliate-data=partnerId=99&siteID=XXXX">
橫幅需要156像素(設(shè)備是312 hi-dpi)在頂部,直到用戶在下方點(diǎn)擊內(nèi)容或關(guān)閉按鈕,您的網(wǎng)站上才為你的網(wǎng)站展現(xiàn)全部的高度。 它就像HTML的DOM對(duì)象,但它不是一個(gè)真正的DOM。
有了智能應(yīng)用程序橫幅,瀏覽器會(huì)自動(dòng)邀請(qǐng)用戶安裝或打開(kāi)本機(jī)應(yīng)用程序
幾秒鐘內(nèi),橫幅顯示“加載”動(dòng)畫時(shí)系統(tǒng)驗(yàn)證應(yīng)用程序?qū)Ξ?dāng)前用戶的設(shè)備和App Store是有效的。 如果它是無(wú)效的,旗幟自動(dòng)隱藏,例如,它是一個(gè)iPad的唯一的應(yīng)用程序,你正在瀏覽iPhone或應(yīng)用程序僅適用于德國(guó)的App Store,而您的帳戶是在M國(guó)。
CSS 3過(guò)濾器
CSS 3 過(guò)濾器是一組圖像操作,我們可以使用CSS的功能,如灰度,模糊,下拉陰影,亮度等功效。 這些功能將在屏幕上顯示內(nèi)容前被應(yīng)用。 我們可以用spaces使用多個(gè)過(guò)濾器。
這里你可以嘗試一個(gè)很好的演示。 一個(gè)簡(jiǎn)單的例子,例如:
-webkit-filter: blur(5px) grayscale (.5) opacity(0.66) hue-rotate(100deg);
CSS 3交叉淡變
iOS 6開(kāi)始支持一些新的CSS Image Values,包括交叉淡入淡出功能。 有了這個(gè)功能,我們可以將兩個(gè)圖像在同一個(gè)地方有不同程度的透明度,它甚至可以是過(guò)渡或動(dòng)畫的部分。
簡(jiǎn)單的例子:
background-image: -webkit-cross-fade(url("logo1.png"), url("logo2.png"), 50%);
Safari中的全屏幕
除了chrome-less 主屏幕meta標(biāo)簽,現(xiàn)在的iPhone和iPod Touch(而不是在iPad)支持全屏幕模式的窗口。 這是完美的身臨其境的體驗(yàn),如游戲或多媒體應(yīng)用程序。 沒(méi)有辦法強(qiáng)制全屏模式,它需要由用戶啟動(dòng)(工具欄上的最后一個(gè)圖標(biāo))。 但是,我們可以邀請(qǐng)用戶,移動(dòng)到窗口,并按下屏幕上的全屏圖標(biāo)來(lái)激活我們的應(yīng)用程序。 如果我們混合了一些觸摸事件處理,我們就可以隱藏URL地址欄來(lái)提供良好界面,直到用戶離開(kāi)全屏幕。
iPhone和iPod Touch上的全螢?zāi)粚?dǎo)航
你總能找到兩個(gè)或三個(gè)覆蓋底部的按鈕,你應(yīng)該知道,哪個(gè)后退按鈕,可選的前進(jìn)按鈕和取消全屏。
您可以使用onresize事件檢測(cè)是否用戶切換到全屏幕。
動(dòng)畫計(jì)時(shí)API
游戲開(kāi)發(fā)人員很幸運(yùn)。 iOS 6支持的動(dòng)畫計(jì)時(shí)API ,也被稱為requestAnimationFrame,一個(gè)新的方法來(lái)管理基于JavaScript的動(dòng)畫。 這里有一個(gè)很好的示范,更詳細(xì)的說(shuō)明看來(lái)自保羅愛(ài)爾蘭博客 。
CSS圖片Set,這是沒(méi)有任何標(biāo)準(zhǔn)組的一部分。 這是一個(gè)新的圖像功能, 圖像集接收一組附加的條件或圖片。有了這個(gè)新的功能,我們不需要為不同的分辨率,使用媒體查詢來(lái)定義不同的圖像。 工作的語(yǔ)法是:
-webkit-image-set(url(low.png) 1x, url(hi.jpg) 2x)
它就像CSS背景圖像一樣工作 。 有了這個(gè)新的語(yǔ)法,我們可以有更清晰的多分辨率圖像清晰度,因此我們并不需要使用媒體查詢和background-size 值。
Passbook
Passbook是一個(gè)新的iOS應(yīng)用程序,一個(gè)虛擬容器,例如通行證,門票,優(yōu)惠券,會(huì)員卡,禮品卡。 作為一名Web開(kāi)發(fā)人員,你可能想為用戶提供優(yōu)惠券,門票,你的下一個(gè)航班的電·子·客·票或忠誠(chéng)卡。
蘋果允許網(wǎng)站不需要本機(jī)程序就可提供這種通行證 。
為了在您的網(wǎng)站上提供通行證,你需要使用application/vnd.apple.pkpass MIME類型或通過(guò)電子郵件發(fā)送
蘋果提供了一個(gè)工具,您可以在您的服務(wù)器上快速地安裝打包和定制簽名通行證可能包括當(dāng)前用戶的信息
要傳遞的文件僅僅是一個(gè)JSON元數(shù)據(jù)文件和一對(duì)圖像。 我們需要打包文件,并簽署。 不幸的是 , 要簽署通過(guò),我們需要蘋果的簽名 ,這意味著Web開(kāi)發(fā)人員需要一個(gè)iPhone開(kāi)發(fā)者計(jì)劃帳戶($ 99/year)。 如果您收到通知已經(jīng)簽署,您可以將它在自己的網(wǎng)站上。
通行證的強(qiáng)大功能之一是,一旦安裝結(jié)束,并通過(guò)推送通知服務(wù),可以提供一些網(wǎng)絡(luò)服務(wù)給用戶和推送消息提醒,操作系統(tǒng)將調(diào)用你的Web服務(wù),更新信息的傳遞。
更多passbook信息developer.apple.com
存儲(chǔ)API和web應(yīng)用程序的更新
沒(méi)有新的存儲(chǔ)API。 沒(méi)有索引型數(shù)據(jù)庫(kù)的支持。 然而,也有一些變化,你應(yīng)該考慮:
應(yīng)用程序緩存限制增加至25MB。 Chromeless web應(yīng)用程序 (使用apple-mobile-web-app-capable meta標(biāo)簽)現(xiàn)在有自己的存儲(chǔ)沙箱 。 這意味著,即使他們來(lái)自同一個(gè)域,來(lái)自主屏幕上web應(yīng)用都會(huì)有它自己的持久本地存儲(chǔ)和SQL存儲(chǔ)。 即使你多次安裝的圖標(biāo),每個(gè)圖標(biāo)都會(huì)有自己的沙箱。 雖然這是個(gè)好消息,但如果你從網(wǎng)站通過(guò)存儲(chǔ)傳遞信息給主屏幕小部件,它可能也是一個(gè)問(wèn)題。 看喬治·亨納的文章 。 有一個(gè)新的未公開(kāi)的meta標(biāo)簽,可用于在任何網(wǎng)站上( apple-mobile-web-app-capable元標(biāo)記),允許我們?yōu)橹髌聊粓D標(biāo)定義不同的標(biāo)題 。 正如你可能知道,在默認(rèn)情況下Safari瀏覽器文檔的標(biāo)題限制為13個(gè)字符。 現(xiàn)在我們可以定義主屏幕使用的替代標(biāo)題
<meta name="apple-mobile-web-app-title" content="My App Name">
我還發(fā)現(xiàn), apple-mobile-web-app-orientations接受的可能值有portrait, portrait-upside-down, landscape-right, landscape-left, portrait-any。
Web View更新
Web View(pseudobrowsers,PhoneGap/Cordova應(yīng)用程序,嵌入式瀏覽器) 上Javascript運(yùn)行比Safari慢3.3倍(或者說(shuō),Nitro引擎在Safari瀏覽器是Web應(yīng)用程序是3.3倍速度)。
我們可以找到一些其他的好消息:
web應(yīng)用程序的調(diào)試Remote Web Inspector 一個(gè)新的supressesIncrementalRendering的布爾屬性,改進(jìn)了部分呈現(xiàn)機(jī)制 。 我相信,以減少加載網(wǎng)頁(yè)感覺(jué),這個(gè)功能是非常有用的。 一個(gè)新的WebKitStoreWebDataForBackup info.plist的布爾功能,在這里我們可以定義我們要存儲(chǔ)在本地存儲(chǔ)和Web SQL數(shù)據(jù)庫(kù)進(jìn)行備份的地方,如在iCloud。 這個(gè)問(wèn)題已經(jīng)出現(xiàn)在iOS 5.01,現(xiàn)在它解決了 開(kāi)發(fā)者協(xié)議的改變 似乎限制只使用本地的WebView來(lái)解析HTML和JS的了。 這很好,如果有人從蘋果可以證實(shí)這一點(diǎn)。 內(nèi)部WebKit引擎它是唯一能夠下載并執(zhí)行新的代碼的引擎,確保預(yù)期相同的應(yīng)用程序行為 。 如果你不從網(wǎng)絡(luò)上下載的代碼您可以使用自己的引擎。 這可能打開(kāi)一扇門...如提供我們自己的engine,例如,WebGL支持。
遠(yuǎn)程調(diào)試
這是對(duì)Web開(kāi)發(fā)人員一個(gè)巨大的變化。 iOS上Safari第一次,包括官方的Remote Web Inspector。 因此,iWebInspector或Weinre工具,將因?yàn)檫@個(gè)版本將變得過(guò)時(shí)。 遠(yuǎn)程調(diào)試器可以與模擬器或通過(guò)USB連接設(shè)備一起工作。
要啟動(dòng)遠(yuǎn)程檢查會(huì)話,你需要使用桌面Safari 6瀏覽器 。 這是壞消息:你只能在Mac桌面電腦上調(diào)試你的web應(yīng)用。 這是一個(gè)無(wú)聲的變化,但適用于Windows的Safari已不存在,所以它停留在5.x中 因此,只有與Mac OS計(jì)算機(jī),您才可以在您的iOS設(shè)備開(kāi)啟(至少現(xiàn)在正式)網(wǎng)絡(luò)調(diào)試會(huì)話。
出于安全考慮,您需要先啟用Web檢查器“設(shè)置”>“Safari瀏覽器”>“高級(jí)”。 新的檢查手段意味著舊的JavaScript控制臺(tái)是不可用了。
您可以啟動(dòng)調(diào)試會(huì)話:
在您的iOS設(shè)備或模擬器的Safari窗口 在您的iOS設(shè)備或模擬器上安裝的chrome-less webapp程序 使用Web View本機(jī)應(yīng)用程序,如Apache Cordova/ PhoneGap的應(yīng)用程序。
在談到本機(jī)應(yīng)用程序,你只可以檢查,由Xcode(自己的應(yīng)用程序)安裝在設(shè)備的應(yīng)用程序。 因此,沒(méi)有辦法在網(wǎng)站的檢查iOS上的谷歌瀏覽器。
如果您正在使用Webkit Inspector 連Safari 5或Chrome,你會(huì)在Safari 6看到一個(gè)完全重新設(shè)計(jì)版本的Inspector基于Xcode的本機(jī)開(kāi)發(fā)的UI。 用Inspector調(diào)式會(huì)話,您可以:
查看 HTML和CSS實(shí)時(shí)的變化 訪問(wèn)您的存儲(chǔ):cookies,本地存儲(chǔ),會(huì)話存儲(chǔ)和SQL數(shù)據(jù)庫(kù) 審·查Profile web應(yīng)用,包括網(wǎng)絡(luò)請(qǐng)求,布局和渲染和JavaScript和事件的表現(xiàn)報(bào)告。 這是性能工具方面邁出的一大步。 搜索你的DOM 在一個(gè)地方查看所有的錯(cuò)誤和警告 管理你的workers(線程) 管理JavaScript斷點(diǎn),并確定未捕獲的異常斷點(diǎn)。 訪問(wèn)控制臺(tái)和執(zhí)行JavaScript 調(diào)試JavaScript代碼 觸摸檢查:在inspector里面有一個(gè)小手圖標(biāo),可以讓你在設(shè)備上觸摸和在inspector發(fā)現(xiàn)DOM元素。
蘋果干得好,我們?cè)趇OS上等這個(gè)已經(jīng)很長(zhǎng)一段時(shí)間 。 Apache Cordova 用戶使用此功能也應(yīng)該喜歡。
其他較小的更新
蘋果公司聲稱有一個(gè)更快的JavaScript引擎 。 它似乎是真實(shí)的。 在SunSpider測(cè)試中,我在同一設(shè)備上iOS 5.1和iOS 6的JavaScript性能提高20%。 谷歌地圖在iOS 6 上不再可用,現(xiàn)在http://maps.google.com重定向到谷歌地圖的網(wǎng)站,而不是本機(jī)應(yīng)用程序。 因此有一個(gè)新的URL 模式,maps,這將打開(kāi)本機(jī)的新的地圖應(yīng)用程序。 語(yǔ)法是maps:?q=<query>,query可以是搜索詞或經(jīng)緯度(以逗號(hào)分隔)。 要啟動(dòng)路線導(dǎo)航,參數(shù)是:maps:?saddr=<source>&daddr=<destination>。 XHR2:現(xiàn)在XMLHttpRequestProgressEvent得到支持 autocomplete屬性的輸入遵循DOM規(guī)范 來(lái)自DOM4的Mutation Observers已經(jīng)實(shí)現(xiàn)。 您可以使用WebKitMutationObserver構(gòu)造器捕獲DOM的變化 Safari不再總是對(duì)用 -webkit-transform:preserve-3d 的元素創(chuàng)建硬件加速層, 我們應(yīng)該停止使用。 通過(guò)window.selection 的Selection API <keygen>元素 Canvas更新 :createImageData有一個(gè)參數(shù),現(xiàn)在有兩個(gè)新的功能做好準(zhǔn)備,用webkitGetImageDataHD和webkitPutImageDataHD提供高分辨率圖像 。 更新SVG處理器和事件構(gòu)造函數(shù) 新的CSS viewport的有關(guān)測(cè)量:VH(viewport的高度),VW(viewport寬度)和VMIN(VW和VH之間最?。?CSS3 Exclusions 和CSS Regions提供Beta 1版,但他們?cè)谧罱K版本中被刪除。 這是一個(gè)恥辱,雖然他們太新,還不夠成熟。 iCloud 標(biāo)簽 。 您可以在所有的設(shè)備,包括Mac電腦,iPhone和iPad之間同步您的標(biāo)簽。 所以,相同的URL將通過(guò)所有的設(shè)備。 要小心使用移動(dòng)網(wǎng)絡(luò)架構(gòu)!
我們?nèi)栽诘却?/strong>
有一些東西,我們?nèi)匀恍枰却乱粋€(gè)版本,如:
索引型數(shù)據(jù)庫(kù)IndexedDB 文件系統(tǒng)API 性能Timing API WebRTC和getUserMedia WebGL仍然被禁用 游戲/ inmersive應(yīng)用程序的方向鎖定API 集成Facebook和Twitter帳戶的原生API,所以我們可以使用當(dāng)前操作系統(tǒng)的用戶的憑據(jù)自動(dòng),而不是迫使用戶重新登錄。
最后的思考
在iOS 6上的Safari是為HTML5開(kāi)發(fā)調(diào)試工具邁出了一大步 ,新的API,更好的JavaScript性能。 不過(guò),我必須說(shuō),蘋果仍然忘記了文檔更新和適當(dāng)?shù)嘏cWeb開(kāi)發(fā)人員溝通。
相關(guān)文章
淺談HTML5 FileReader分布讀取文件以及其方法簡(jiǎn)介
本篇文章主要介紹了淺談HTML5 FileReader分布讀取文件以及其方法簡(jiǎn)介,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-11-09HTML與XHTML、以及HTML4與HTML5標(biāo)簽之間的區(qū)別簡(jiǎn)介
這篇文章主要介紹了HTML與XHTML、以及HTML4與HTML5標(biāo)簽之間的區(qū)別,是網(wǎng)頁(yè)前端編程入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-11-07HTML5的一個(gè)顯示電池狀態(tài)的API簡(jiǎn)介
這篇文章主要介紹了HTML5的一個(gè)顯示電池狀態(tài)的API簡(jiǎn)介,由Mozilla設(shè)計(jì),具體的設(shè)備和瀏覽器支持情況還要通過(guò)檢測(cè)才能確定,需要的朋友可以參考下2015-06-18HTML5是什么 HTML5是什么意思 HTML5簡(jiǎn)介
隨著Windows8正式版發(fā)布的腳步近在咫尺,近來(lái)關(guān)于Win8、IE10、HTML5的新聞逐漸增多,很多朋友對(duì)于Win8系統(tǒng)以及IE10瀏覽器都比較了解,但對(duì)于HTML5是什么還真有不少朋友不清2012-10-26HTML5安全介紹之內(nèi)容安全策略(CSP)簡(jiǎn)介
前言:HTML5出現(xiàn)后,網(wǎng)絡(luò)安全更加受到廣泛的關(guān)注。Web對(duì)于網(wǎng)絡(luò)安全有哪些改進(jìn)?我們?nèi)绾蝸?lái)面對(duì)越來(lái)越危險(xiǎn)的網(wǎng)絡(luò)欺詐和攻擊?下面的文章談到了W3C對(duì)于這個(gè)問(wèn)題的最新解決方2012-07-10HTML5的標(biāo)簽的代碼的簡(jiǎn)單介紹 HTML5標(biāo)簽的簡(jiǎn)介
本文主要介紹了HTML5的標(biāo)簽.不同于以前的標(biāo)簽.更簡(jiǎn)單.更方便2012-05-28html5新增的定時(shí)器requestAnimationFrame實(shí)現(xiàn)進(jìn)度條功能
html5為什么新增一個(gè)requestAnimationFrame,他的出現(xiàn)是為了解決什么問(wèn)題?帶著這些問(wèn)題跟隨腳本之家小編一起學(xué)習(xí)吧2018-12-13- 下面小編就為大家?guī)?lái)一篇HTML5新增加的功能詳解。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-05
- 這篇文章主要介紹了html5簡(jiǎn)介及新增功能介紹,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-18