webAPP或手機(jī)網(wǎng)站開(kāi)發(fā)設(shè)計(jì)實(shí)用小技巧分享

從今年年初開(kāi)始,關(guān)注webAPP項(xiàng)目的人越來(lái)越多,而且大家都愿意采用原生APP+HTML5來(lái)開(kāi)發(fā)。為什么會(huì)要采用html5+css3實(shí)現(xiàn)手機(jī)APP應(yīng)用的呢?

第一:因?yàn)閃EB APP在版本更新、開(kāi)發(fā)周期上有明顯的優(yōu)勢(shì),而且這種應(yīng)用將越來(lái)越廣,這點(diǎn)是不需要懷疑的。 只不過(guò)單純依賴于瀏覽器的APP在權(quán)限等方面受限頗多的。

第二:對(duì)于一個(gè)合理的APP,應(yīng)該是原生APP+WEB APP結(jié)合的方式出現(xiàn),功能互補(bǔ),同時(shí)體現(xiàn)WEB的輕量與快速發(fā)布優(yōu)勢(shì)!保證了整體APP的性能!

所以,今天25學(xué)堂跟大家分享一些關(guān)于webAPP的設(shè)計(jì)開(kāi)發(fā)實(shí)用小技巧和性能優(yōu)化方面的注意事項(xiàng)。

1、meta標(biāo)簽的應(yīng)用和知識(shí)點(diǎn)介紹。詳細(xì)的可以閱讀《CSS3媒體查詢

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />

<meta content="yes" name="apple-mobile-web-app-capable" />

<meta content="black" name="apple-mobile-web-app-status-bar-style" />

<meta content="telephone=no" name="format-detection" />

第一個(gè)meta標(biāo)簽:表示:強(qiáng)制讓文檔的寬度與設(shè)備的寬度保持1:1,并且文檔最大的寬度比例是1.0,且不允許用戶點(diǎn)擊屏幕放大瀏覽;

第二個(gè)meta標(biāo)簽:是iphone設(shè)備中的safari私有meta標(biāo)簽,它表示:允許全屏模式瀏覽;

第三個(gè)meta標(biāo)簽:也是iphone的私有標(biāo)簽,它指定的iphone中safari頂端的狀態(tài)條的樣式;

第四個(gè)meta標(biāo)簽:表示:告訴設(shè)備忽略將頁(yè)面中的數(shù)字識(shí)別為電話號(hào)碼

51495069e744f9594c000001.jpg

2、注意鏈接的觸碰區(qū)域大小。

因?yàn)榇蠖嗍怯|屏手機(jī),要讓用戶很方便的能點(diǎn)擊到標(biāo)簽(我以前看到過(guò)文章,現(xiàn)在找不到出處,好像是最小得42px*42px):

操作對(duì)象的大小符合手指的操作,按鍵的大小設(shè)置規(guī)范:

食指點(diǎn)擊的間距 約為7*7 mm, 1mm間距,

拇指點(diǎn)擊8*8 mm,2mm間距。當(dāng)前推薦的值為9mm 大小,最小應(yīng)不小于7mm。

當(dāng)然一些重要操作,或者頻繁點(diǎn)擊的區(qū)域可以設(shè)置的略微更大一些。

詳細(xì)關(guān)于人的手指觸發(fā)的詳細(xì)介紹:APP觸控操作設(shè)計(jì)原則之觸控目標(biāo)的尺寸大小

3、webapp中class和id的命名盡量斷點(diǎn),圖片盡量少用點(diǎn),可以采用css3來(lái)設(shè)計(jì)一些圖標(biāo),或者你可以采用現(xiàn)成的圖標(biāo)字體庫(kù)。以節(jié)省css的大小,提高加載速度。

4、webAPP的開(kāi)發(fā)工具介紹-PhoneGap

PhoneGap是一個(gè)用基于HTML,CSS和JavaScript的,創(chuàng)建移動(dòng)跨平臺(tái)移動(dòng)應(yīng)用程序的快速開(kāi)發(fā)平臺(tái)。它使開(kāi)發(fā)者能夠利用iPhone,Android,Palm,Symbian,WP7,Bada和Blackberry智能手機(jī)的核心功能——包括地理定位,加速器,聯(lián)系人,聲音和振動(dòng)等,此外PhoneGap擁有豐富的插件,可以以此擴(kuò)展無(wú)限的功能。PhoneGap是免費(fèi)的,但是它需要特定平臺(tái)提供的附加軟件,例如iPhone的iPhone SDK,Android的Android SDK等,也可以和DW5.5配套開(kāi)發(fā)。使用PhoneGap只比為每個(gè)平臺(tái)分別建立應(yīng)用程序好一點(diǎn)點(diǎn),因?yàn)殡m然基本代碼是一樣的,但是你仍然需要為每個(gè)平臺(tái)分別編譯應(yīng)用程序。

5、手機(jī)大多是高級(jí)瀏覽器,可以使用html5+css3開(kāi)發(fā)。這樣提高web的渲染速度。而且可以做很多友好的體驗(yàn)。

6、解決iphone橫屏?xí)r字體變大問(wèn)題或者內(nèi)容大小不一樣等 代碼分享:body{-webkit-text-size-adjust:none}

7、響應(yīng)式圖片技術(shù)介紹:

響應(yīng)式圖片是指用戶代理根據(jù)輸出設(shè)備的分辨率不同加載不同類型的圖片,不會(huì)造成帶寬的浪費(fèi)。同時(shí),在改變輸出設(shè)備類型或分辨率時(shí),能及時(shí)加載對(duì)應(yīng)類型的圖片。

用法:T1_5wZXfNdXXXx4zQi-562-62

 

每天更新,
全站高品質(zhì)素材免費(fèi)下載!