DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> WEB前端代碼 >> 移動前端開發基礎經驗小結
移動前端開發基礎經驗小結
編輯:WEB前端代碼     
1、前言
本文旨在記錄本人涉足移動webApp開發的幾點體會,歡迎分享與指正。

2、再見,IE678
移動設備,Android跟iPhone是主流,即使是win8設備,自帶的都IE10以上,再也見不到那個不按W3c套路解釋的浏覽器了,很多兼容性問題都可以放下,專心處理業務了。

3、HTML5/CSS3
HTML5/CSS3在移動設備上已經非常普及了,再也不用考慮以前在桌面設備上是否有舊版本浏覽器的問題了。HTML5的跨平台、便於維護、開發成本低,各種優點使得其在移動設備上應用非常廣。phonegap等混合框架的出現也彌補了webapp的缺點,前景非常遼闊。

4、viewport
開發web頁面時的一個基礎meta屬性

<meta content="width=device-width,initial-scale=1.0" name="viewport">
讓頁面的寬度與設備寬度一致,並且禁止縮放,如此一來大大減少了web開發的設計成本,並且讓web頁面顯示的效果適當。

5、模擬器
chrome的模擬器(Emulation)真是開發利器,先在桌面上完成大部分的開發與初步的測試,再在專門的設備上測試。

6、devicePixelRatio
這個是設計webApp頁面時一個重要的參數,定義如下

window.devicePixelRatio是設備上物理像素和設備獨立像素(device-independent pixels (dips))的比例。
公式表示就是:window.devicePixelRatio = 物理像素 / dips
以Samsung GALAXY Note 2為例,我們可以在chrome的模擬器中很快地找到這個設備



這款手機橫向物理像素有720,縱向物理像素有1280,但由於devicePixelRatio=2,也就是說橫縱各用兩個像素來表示原來一個像素的內容,整塊屏幕就是用四個物理像素來表示一個像素的內容,這是為了讓圖像顯示更加逼真。對於開發者而言,我們要填充的是內容,故要把橫向寬度定為720px/2=360px,縱向定為640px,開發起來的頁面才在此設備上顯示正常。

7、hover & touch
不再有hover了,並且開始關注touch。這點開發經驗還少,以後再補充。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved