使用 html5 怎麽開發壹個動態網站？

使用 html5 開發壹個動態網站方法：

工具/原料

HBuilder6.6

MUI2.5

方法/步驟

為了演示HTML5 APP頁面是如何做到動態調整布局。

1、首先，我們創建壹個移動APP項目，然後，添加壹個index.html頁面。代碼裏，添加壹個圖標，以及添加引入壹個JS文件，該文件的作用在於：請求後臺JS文件。

2、接下來，我們看看service.js文件是如何請求後臺JS文件的。編寫該service.js文件的重點是：A、如何異步請求後臺JS文件；B、請求回來的後臺文件，如何動態添加到頁面的Head裏。

3、緊接著，我們對APP項目進行打包操作：選擇需要的打包類型，然後，填寫相應的證書信息。如果選擇IOS打包，請在打包證書裏，添加需要安裝的蘋果手機UDID（未提供UDID，則不能安裝APP)。

4、打包完成後，便可以下載安裝APP。先用蘋果手機連接電腦，然後通過工具安裝APP。當然，這種連接數據線安裝的方式，只能適合個人測試使用。如果想給別人批量安裝測試，請參考《HTML5 APP開發之APP測試》經驗。

1HTML5 APP開發之APP測試

5、APP安裝完成後，我們看看打開APP現有的效果是怎樣的。我們看到APP頁面的左上角，顯示了壹個聯系人的圖標。

6、由於菜果手機不同系列的屏幕大小不壹樣，而且屏幕的分辨率也不壹樣安桌手機的也壹樣。導致同壹個頁面布局，在不同的手機上，顯示的位置有時偏差比較大，有時也好。當然，這也加大了開發和測試的難度。不可能因壹些位置問題，就重新發布APP。下面是蘋果手機不同系列的屏幕大小分辨率說明：

7、所以，才有了動態調試頁面布局的想法。回到第二步，我們是有請求後臺JS文件的（showJSPage.js）。下面看看showJSPage.js，是如何編寫的：A、首先判斷手機操作系統類型；B、判斷屏幕大小。

8、添加了showJSPage.js代碼後，啟動後臺服務。然後，關閉原來打開的APP軟件，再重新打開APP軟件，便可查看修改後的效果。

9、整個方案的理解重點在於：熟悉JS執行的先後順序，以及對手機屏幕大小與屏幕分辨率的關系。才能靈活運用，達到自己想要的目的。