在Appcan開發中，首先要進行的就是頁面配置，然後在這個頁面上填充資料，加上互動元素，最終構成完整的應用。
因為appcan是使用HTML5+CSS3+JavaScript技術來進行開發，所以與普通web開發基本沒有區別，理解成webapp的開發或許更好解釋。
iOS、Android系統中已經內建webkit核心，而appcan正是利用webkit來運行我們編寫的頁面，也就是可以將appcan看作是一個加強的webkit核心，強在它能通過JS來控制手機某些功能，比如打電話、發簡訊、定位等等，這是普通webapp所不能達到的。
HTML頁面配置下面就介紹一些在appcan需要注意的問題，避免這些問題所帶來的麻煩。
行動裝置螢幕一般都比較小，在手機瀏覽器直接瀏覽網頁時，會對網頁進行縮放。可是我們開發的是類似原生的應用，是不能允許使用者對網頁地區進行縮放、調整大小操作的，那如何來解決呢？
我們可以在appcan裡建立一個叫index.html的頁面模板，看它頭部代碼：
<!DOCTYPE html><html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px"> <head> <title> </title> <meta charset="utf-8"> <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <link rel="stylesheet" href="css/ui-base.css"> <link rel="stylesheet" href="css/ui-media.css"> <script src="js/zy_control.js"> </script> <script src="js/zy_click.js"> </script> <script></script> </head>
從代碼上可以看到，頁面採用標準的HTML5頭部聲明。<title> 標籤可有可無，留空也可。接下來是聲明頁面編碼，建議使用UTF8編碼，因為JS中ajax與json編碼只能是UTF8，所以最好使用UTF8，避免出現亂碼和程式異常。
現在進入重點部分，viewport這個元屬性，什麼是viewport？
我再分別解釋一下content裡的內容。
target-densitydpi=device-dpi，指定螢幕像素密度DPI，device-dpi 為裝置原本的DPI值，不會有任何縮放。
width=device-width，指定螢幕寬度，device-width裝置螢幕的寬度。
initial-scale=1，初始縮放比例，設定為1，表示不進行任何縮放，顯示原始大小。
user-scalable=no，使用者否否可以手動縮放頁面，設為no不允許。
minimum-scale=1.0，最小縮放比例，設為1，最小隻能縮放到1倍。
maximum-scale=1.0，最大縮放比例，設為1，最大隻能縮放到1倍，與上一項配合，保證，頁面不會進行縮放。
其實user-scalable為no時，最後兩項不會起作用，因為不會發生縮放問題，圖個心安，就都放上了。
這樣設定完成後，就能夠保證，在任何裝置中，網頁的寬度就是螢幕顯示地區的寬度，不會發生變化，這樣我們進行排版裡就不會出現問題，這也是與普通web開發比較大的不同之處了。
ui-media.css 這個檔案就是官方預設產生的CSS檔案，檔案大概的用途就是在不同分辨屏下設定相對合適的字型大小，從9px到32px不等，iphone為16px, ipad1為20px，800*480的android機基本為24px。正是因為這個檔案，所以才使得在不同大小的螢幕上的字型看起來不會有太大的比例失調問題，比如在ipad上字型不會顯示得太小，iphone上不會太大。更重要的是文字的大小會直接影響以後CSS長度單位的設定！
至於ui-base.css檔案，是整個項目中的CSS樣式檔案，所有用到的樣式都這個檔案中，編寫與普通web網頁中的編寫是一致的，而且支援CSS3屬性，合理的使用CSS3屬性會提高效能和效率。
無論是手機上還是電腦上，CSS的相容性問題一直存在，appcan中也不例外，雖然支援CSS3但是各平台支援都有差異，需要酌情使用。
對於appcan，最頭疼的就是不同解析度的顯示效果，執行個體中針對不同大小的螢幕都使用同一種布局方案，這也是大部分應用採用的方案。那麼如何使得這些裝置中顯示上的效果基本一致呢？
大家考慮一下，ui-media.css使得螢幕越大的裝置字型就越大，反之亦然。那麼有沒有能夠讓布局自適應的方法？在CSS中有em這麼個單位，它不是一個精確的單位，而是一個相對的單位，相對誰呢？相對的就是字型大小，正是上面講到的字型大小直接影響CSS布局的原因。
em會繼承父級元素的字型大小，記住這點很重要，不至於在使用中出現大小不一致時摸不到頭緒，影響開發。
文檔有預設文字大小，每個元素中又有字型大小，所以使用em時，要冷靜的清晰去判斷當前位置的文字大小的具體的取值。
em單位會受到頁面預設字型大小的影響，內層元素會受到外層元素字型大小的影響。
為什麼要使用em而不去使用px呢？em是相對大小，px是固定大小，em在不同解析度中會顯示出不同大小，而px始終是一個大小！
大家可以去看看ui-base.css與官方提供的UI的CSS檔案中，大量的在使用em作為單位，而px單位出現幾乎為零。
在項目開發中推薦大家使用em作為單位使用，盡量避免使用px，這樣可以保證在不同裝置上顯示效果基本一致。
背景圖片縮放說完了字型我們再說另一個可能需要縮放的元素——背景圖片。
普通的img標籤的圖片，可以通過控制長寬來限制縮放，而背景圖片卻不可以，當容器大小發生變化時，背景圖片依然是原有大小。
在CSS3中同樣存在一個可以協助我們來控制背景圖片按容器大小進行縮放的屬性——-webkit-background-size:100% 100%;
至於這個屬性的使用方法，我就不過多介紹了，可以自己Google。只要在需要背景圖片縮放的元素上設定此屬性即可。
那麼在我們的執行個體中，幾乎所有用到背景圖的時候，都加上了這個屬性，大家可以看看執行個體中底部按鈕是如何使用這個屬性的，按鈕的大小會根據螢幕進行縮放，同時按鈕的背景一直都是充滿整體按鈕的。這個屬性在開發過程中非常實用！
在使用了em和-webkit-background-size兩個屬性後，你就會發現在appcan中開發項目是多麼快樂的一件事情啊。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
