Chrome全平臺(tái)更至 22版本后，給前端調(diào)試帶了幾個(gè)另人興奮的實(shí)用功能

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

升級(jí)了iOS6后測(cè)試了一下給應(yīng)用推廣來(lái)的新特性SMART APP BANNERS .首先要在head標(biāo)簽添加如下meta

要注意的是content屬性：app-id即是你的應(yīng)用id,app-argument則用作打開(kāi)應(yīng)用時(shí)的URL，比如打開(kāi)網(wǎng)易新聞對(duì)應(yīng)的新聞VIEW。

測(cè)試結(jié)果是：

升級(jí)了iOS6的iOS設(shè)備，不過(guò)有點(diǎn)小BUG，比如new ipad中整條內(nèi)容部分是居左而沒(méi)居中顯示，itouch4只有在對(duì)應(yīng)的應(yīng)用成功安裝了才顯示。希望這些BUG是個(gè)別機(jī)子，因?yàn)闇y(cè)試條件有限沒(méi)有全面測(cè)試。

你想你會(huì)問(wèn)，如果動(dòng)態(tài)添加這條meta會(huì)是什么結(jié)果呢？先來(lái)看看：

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

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

1.滑動(dòng)過(guò)程中，滾動(dòng)區(qū)內(nèi)的元素在釋放手指時(shí)出現(xiàn)細(xì)微閃動(dòng)

2.圖片縮放過(guò)程中釋放手指時(shí)明顯閃動(dòng)

3.iOS上從mobile safari打開(kāi)或第三方應(yīng)用內(nèi)打開(kāi)后，切回主屏幕再切回頁(yè)面時(shí)明顯閃動(dòng)

4.頁(yè)面初始時(shí)閃動(dòng)

大致這些情況下會(huì)有閃動(dòng)，在ipad2,new ipad上會(huì)明顯看得出。

下面就來(lái)分析產(chǎn)生的原因和解決辦法：

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

iOS6的Mobile Safari給前端開(kāi)發(fā)者帶來(lái)了什么  里已經(jīng)提到iOS6的mobile safari將有智能應(yīng)用通知標(biāo)題（Smart App Banners）的功能，意在解決mobile safari里無(wú)法檢測(cè)第三方應(yīng)用安裝狀態(tài)的，通過(guò)這個(gè)功能，可以在頁(yè)面中實(shí)現(xiàn)應(yīng)用推薦類的需求。但目前來(lái)看，要實(shí)現(xiàn)這個(gè)需求只能在第三方應(yīng)用中實(shí)現(xiàn)。思路也簡(jiǎn)單，第三方應(yīng)用可以通過(guò)iOS的SDK提供的接口檢測(cè)到對(duì)應(yīng)的應(yīng)用是否已經(jīng)安裝，然后在內(nèi)嵌的UIWebView中打開(kāi)的連接時(shí)追加參數(shù)如“?isinstalled=1”之類的參數(shù)供web頁(yè)面獲取來(lái)判斷。web獲知狀態(tài)后可以提示給用戶觖發(fā)的對(duì)應(yīng)的應(yīng)用的方案，如“打開(kāi)應(yīng)用”，“安裝應(yīng)用”等。

不過(guò)我們今天來(lái)說(shuō)一種不借助第三方應(yīng)用在mobile safari里就能實(shí)現(xiàn)跟上述類似的功能。

先來(lái)看看實(shí)現(xiàn)代碼：

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

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

iScroll4啟用snap時(shí)原生滾動(dòng)會(huì)被阻止，具體表現(xiàn)是拖動(dòng)snap作用的元素往非snap路徑時(shí)將無(wú)法拖動(dòng)頁(yè)面。

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

這種辦法在測(cè)試中iOS和原生android設(shè)備是沒(méi)有問(wèn)題的，但第三方定制系統(tǒng)的設(shè)備（如小米，魅族）以及將頁(yè)面在android應(yīng)用中打開(kāi)都會(huì)造成滑動(dòng)非常的卡的現(xiàn)象。這時(shí)只要改改iScoll4的源碼即可。具體參看

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

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

DeviceMotionEvent 會(huì)在設(shè)備發(fā)生有意義的擺動(dòng)(或運(yùn)動(dòng))時(shí)產(chǎn)生.事件對(duì)象封裝有產(chǎn)生的間距值,旋轉(zhuǎn)率,和設(shè)備加速度.

加速度的計(jì)算方式是重力和用戶產(chǎn)生的兩個(gè)加速度矢量之和.設(shè)備是通過(guò) 陀螺儀和加速計(jì)來(lái)區(qū)別這兩者的.

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

閱讀全文

http://www.iunbug.com/archives/2012/06/14/360.html

你可能聽(tīng)說(shuō)了這個(gè)新MVC框架： CanJS。還有什么比用它來(lái)創(chuàng)建一個(gè)聯(lián)系人Web App更能深入了解它的辦法呢？當(dāng)看完這三篇教程，你將全面了解用它的什么工具來(lái)創(chuàng)建你自己的Web App。

選擇正確的庫(kù)

創(chuàng)建一個(gè)JS APP沒(méi)有好的工具是很有難度的，jQuery只是操作DOM的庫(kù)，沒(méi)有提供任何創(chuàng)建APP的基礎(chǔ)，這就是為什么我們要一個(gè)類似CanJS的專門的庫(kù)。

CanJS 是一個(gè)輕量級(jí)的MVC庫(kù)，提供你創(chuàng)建一個(gè)JS APP所需的工具。

CanJS 是一個(gè)輕量級(jí)的MVC庫(kù)，提供你創(chuàng)建一個(gè)JS APP所需的工具。 它提供有MVC (Model-View-Control) 模式的基本框架，模板動(dòng)態(tài)綁定， route的支持且 內(nèi)存安全。同時(shí)支持 jQuery, Zepto, Mootools, YUI, Dojo，有豐富的擴(kuò)展和插件。

第一部分你將學(xué)到：

閱讀全文

http://www.iunbug.com/archives/2012/06/14/360.html