美國(guó)時(shí)間9月19日，中國(guó)時(shí)間9月20日，我更新到了ios6，第一時(shí)間沒(méi)有去調(diào)戲會(huì)普通話的Siri，而是著手研究和校驗(yàn)ios6和它的safari都為webapp開(kāi)發(fā)者或者前端開(kāi)發(fā)者帶來(lái)了哪些便利和好處，請(qǐng)注意本文的發(fā)表時(shí)間，本文是第一時(shí)間放出人肉體驗(yàn)測(cè)試的結(jié)果哦！
1.通過(guò)mac調(diào)試ios上的safari
ios6的到來(lái)，使ios版safari沒(méi)有開(kāi)發(fā)人員調(diào)試工具的狀況成為了歷史。
當(dāng)習(xí)慣新的調(diào)試方法后，你可以放棄用chrome模擬或Weinre來(lái)調(diào)試了。
簡(jiǎn)單說(shuō)來(lái)，ios6允許你通過(guò)pc或者mac上的safari的開(kāi)發(fā)人員工具來(lái)調(diào)試ios設(shè)備上的safari網(wǎng)頁(yè)
下面說(shuō)一下步驟：
1>更新你的ios設(shè)備到ios6
2>打開(kāi)ios設(shè)備的，點(diǎn)擊主屏幕上的“設(shè)置”，然后“Safari”，然后滾屏到最下面， 進(jìn)入“高級(jí)”，打開(kāi)“web檢查器”（設(shè)置->Safari->高級(jí)），如下圖所示：
3>打開(kāi)ios設(shè)備上的Safari，輸入需要調(diào)試的頁(yè)面地址并載入頁(yè)面
4>用usb線將ios設(shè)備鏈接到電腦，打開(kāi)mac上更新好的Safari
5>在mac上的Safari中選擇“開(kāi)發(fā)”，然后選到自己的ios設(shè)備，在右邊滑出菜單中選擇需要調(diào)試的網(wǎng)頁(yè)，如下圖所示：
6>點(diǎn)擊鼠標(biāo)，即可打開(kāi)開(kāi)發(fā)人員工具，調(diào)試ios設(shè)備上的網(wǎng)頁(yè)，如下圖所示：
如果以上操作沒(méi)有奏效，請(qǐng)更新你mac os上的safari，或者多嘗試插拔幾次usb線
2.UI細(xì)節(jié)變化
通過(guò)肉眼對(duì)比，發(fā)現(xiàn)了這樣一些細(xì)節(jié)變化，有一些是開(kāi)發(fā)人員需要注意的，有一些則無(wú)關(guān)緊要
1>頂部欄變成了黑色底色
2>橫屏?xí)r有了一個(gè)全屏按鈕，可以全屏看網(wǎng)頁(yè)
3>地址欄的搜索內(nèi)搜索提供商的字樣被換成了“搜索”2個(gè)字
4>底部的選項(xiàng)按鈕（見(jiàn)圖），有了更多的選項(xiàng)
如下圖所示：
4中的更多選如下圖所示：
3.新支持的css濾鏡特性
ios6的Safari終于支持css3濾鏡了，下面的代碼在ios設(shè)備上終于可用了
1 | -webkit-filter:**** |
可以參考這個(gè)網(wǎng)址了解一下css3 的filter:
4.新增“網(wǎng)站對(duì)應(yīng)的app”的提示條smart app banner
這種提示條會(huì)出現(xiàn)在你的網(wǎng)頁(yè)上部。當(dāng)用戶在ios6的safari上打開(kāi)你的網(wǎng)頁(yè)時(shí)，如果你的站點(diǎn)在App Store中有對(duì)應(yīng)的app，這個(gè)條幅將會(huì)展示，并且用戶可前往下載或直接打開(kāi)，分別如下圖所示：
具體實(shí)現(xiàn)方法，在網(wǎng)頁(yè)的html的head部分增加下面的代碼：
1 | <meta name="apple-itunes-app" content="app-id=你的應(yīng)用的app id" /> |
注意，如果用戶將你的網(wǎng)站“添加到主屏”，且是點(diǎn)擊主屏上的圖標(biāo)打開(kāi)，并且你的網(wǎng)站設(shè)置了
1 | <meta name="apple-mobile-web-app-capable" content="yes" /> |
這個(gè)app banner條是不會(huì)出現(xiàn)的。
聯(lián)系客服
