從今年年初開始,關注webAPP項目的人越來越多,而且大家都愿意采用原生APP+HTML5來開發(fā)。為什么會要采用html5+css3實現(xiàn)手機APP應用的呢?
第一:因為WEB APP在版本更新、開發(fā)周期上有明顯的優(yōu)勢,而且這種應用將越來越廣,這點是不需要懷疑的。 只不過單純依賴于瀏覽器的APP在權限等方面受限頗多的。
第二:對于一個合理的APP,應該是原生APP+WEB APP結合的方式出現(xiàn),功能互補,同時體現(xiàn)WEB的輕量與快速發(fā)布優(yōu)勢!保證了整體APP的性能!
所以,今天25學堂跟大家分享一些關于webAPP的設計開發(fā)實用小技巧和性能優(yōu)化方面的注意事項。
1、meta標簽的應用和知識點介紹。詳細的可以閱讀《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" />
第一個meta標簽:表示:強制讓文檔的寬度與設備的寬度保持1:1,并且文檔最大的寬度比例是1.0,且不允許用戶點擊屏幕放大瀏覽;
第二個meta標簽:是iphone設備中的safari私有meta標簽,它表示:允許全屏模式瀏覽;
第三個meta標簽:也是iphone的私有標簽,它指定的iphone中safari頂端的狀態(tài)條的樣式;
第四個meta標簽:表示:告訴設備忽略將頁面中的數(shù)字識別為電話號碼
2、注意鏈接的觸碰區(qū)域大小。
因為大多是觸屏手機,要讓用戶很方便的能點擊到標簽(我以前看到過文章,現(xiàn)在找不到出處,好像是最小得42px*42px):
操作對象的大小符合手指的操作,按鍵的大小設置規(guī)范:
食指點擊的間距 約為7*7 mm, 1mm間距,
拇指點擊8*8 mm,2mm間距。當前推薦的值為9mm 大小,最小應不小于7mm。
當然一些重要操作,或者頻繁點擊的區(qū)域可以設置的略微更大一些。
詳細關于人的手指觸發(fā)的詳細介紹:APP觸控操作設計原則之觸控目標的尺寸大小
3、webapp中class和id的命名盡量斷點,圖片盡量少用點,可以采用css3來設計一些圖標,或者你可以采用現(xiàn)成的圖標字體庫。以節(jié)省css的大小,提高加載速度。
4、webAPP的開發(fā)工具介紹-PhoneGap
PhoneGap是一個用基于HTML,CSS和JavaScript的,創(chuàng)建移動跨平臺移動應用程序的快速開發(fā)平臺。它使開發(fā)者能夠利用iPhone,Android,Palm,Symbian,WP7,Bada和Blackberry智能手機的核心功能——包括地理定位,加速器,聯(lián)系人,聲音和振動等,此外PhoneGap擁有豐富的插件,可以以此擴展無限的功能。PhoneGap是免費的,但是它需要特定平臺提供的附加軟件,例如iPhone的iPhone SDK,Android的Android SDK等,也可以和DW5.5配套開發(fā)。使用PhoneGap只比為每個平臺分別建立應用程序好一點點,因為雖然基本代碼是一樣的,但是你仍然需要為每個平臺分別編譯應用程序。
5、手機大多是高級瀏覽器,可以使用html5+css3開發(fā)。這樣提高web的渲染速度。而且可以做很多友好的體驗。
6、解決iphone橫屏時字體變大問題或者內(nèi)容大小不一樣等 代碼分享:body{-webkit-text-size-adjust:none}
7、響應式圖片技術介紹:
響應式圖片是指用戶代理根據(jù)輸出設備的分辨率不同加載不同類型的圖片,不會造成帶寬的浪費。同時,在改變輸出設備類型或分辨率時,能及時加載對應類型的圖片。
全站高品質(zhì)素材免費下載!