Chrome全平臺更至 22版本后，給前端調試帶了幾個另人興奮的實用功能

Posted by unbug on Oct 9, 2012 in Web App | 0 comments

升級了iOS6后測試了一下給應用推廣來的新特性SMART APP BANNERS .首先要在head標簽添加如下meta

要注意的是content屬性：app-id即是你的應用id,app-argument則用作打開應用時的URL，比如打開網易新聞對應的新聞VIEW。

測試結果是：

升級了iOS6的iOS設備，不過有點小BUG，比如new ipad中整條內容部分是居左而沒居中顯示，itouch4只有在對應的應用成功安裝了才顯示。希望這些BUG是個別機子，因為測試條件有限沒有全面測試。

你想你會問，如果動態添加這條meta會是什么結果呢？先來看看：

http://www.iunbug.com/archives/2012/09/21/431.html

已經有不少前端同行抱怨iScroll4的各種問題，我個人并不贊同將這些問題歸咎于iScroll4,因為iScroll4進無論是touch事件的捕獲，還是使用transform來處理滾動，以及將cubic-bezier應用到transition上實現高效的平滑滾動，這些原理我們都是已知的。更多原理細節可以參看[譯]手把手教你編寫iOS上Mobile Web App實現Fixed Position和模擬滾動 一文。此文則來解釋另一個被很多人誤解為iScroll4 造成的問題，那就是內容多的頁面閃動的問題?，F象表現為：

1.滑動過程中，滾動區內的元素在釋放手指時出現細微閃動

2.圖片縮放過程中釋放手指時明顯閃動

3.iOS上從mobile safari打開或第三方應用內打開后，切回主屏幕再切回頁面時明顯閃動

4.頁面初始時閃動

大致這些情況下會有閃動，在ipad2,new ipad上會明顯看得出。

下面就來分析產生的原因和解決辦法：

http://www.iunbug.com/archives/2012/09/19/411.html

iOS6的Mobile Safari給前端開發者帶來了什么  里已經提到iOS6的mobile safari將有智能應用通知標題（Smart App Banners）的功能，意在解決mobile safari里無法檢測第三方應用安裝狀態的，通過這個功能，可以在頁面中實現應用推薦類的需求。但目前來看，要實現這個需求只能在第三方應用中實現。思路也簡單，第三方應用可以通過iOS的SDK提供的接口檢測到對應的應用是否已經安裝，然后在內嵌的UIWebView中打開的連接時追加參數如“?isinstalled=1”之類的參數供web頁面獲取來判斷。web獲知狀態后可以提示給用戶觖發的對應的應用的方案，如“打開應用”，“安裝應用”等。

不過我們今天來說一種不借助第三方應用在mobile safari里就能實現跟上述類似的功能。

先來看看實現代碼：

http://www.iunbug.com/archives/2012/09/18/401.html

http://www.iunbug.com/archives/2012/09/18/398.html

iScroll4啟用snap時原生滾動會被阻止，具體表現是拖動snap作用的元素往非snap路徑時將無法拖動頁面。

官方的解決辦法是追加onBeforeScrollStart事件：

這種辦法在測試中iOS和原生android設備是沒有問題的，但第三方定制系統的設備（如小米，魅族）以及將頁面在android應用中打開都會造成滑動非常的卡的現象。這時只要改改iScoll4的源碼即可。具體參看

http://www.iunbug.com/archives/2012/09/18/398.html

Facebook在Mobile Web APP方面一直是擔當榜樣的大哥形像.近日出的新版在iOS上多了個“搖一搖”（Friendshake）尋找附近友鄰功能。與這個功能相關的事件早在iOS4.2的時候就被mobile safari支持了,很早就聽到做mobile游戲的朋友用上這個事件了,即是DeviceMotionEvent,下面我們就來講講這個事件:

DeviceMotionEvent 會在設備發生有意義的擺動(或運動)時產生.事件對象封裝有產生的間距值,旋轉率,和設備加速度.

加速度的計算方式是重力和用戶產生的兩個加速度矢量之和.設備是通過 陀螺儀和加速計來區別這兩者的.

使用方法如下:http://www.iunbug.com/archives/2012/07/18/387.html