【範例4-1 簡單的頁面hello world】
- 01 <!DOCTYPE>
- 02 <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml">
- 03 <head>
- 04 <meta http-equiv="Content-Type"content="text/html; charset=utf-8" />
- 05 <meta name=”viewport” content=”width=device-width,initial-scale=1”> //本節的重點所在
- 06 <title>hello world </title> //title屬性在應用中是不顯示的
- 07 <link rel="stylesheet"href="jquery.mobile-1.0.min.css" /> //jQuery Mobile樣式文件
- 08 <script src="jquery-1.7.1.min.js"></script> //引入jQuery腳本
- 09 <script src="jquery.mobile-1.1.1.min.js"></script> //引入jQuery Mobile腳本
- 10 </head>
- 11 <body>
- 12 <div data-role="page"> //此處爲頁面控件
- 13 hello world //在空間中插入內容hello world
- 14 </div>
- 15 </body>
- 16 </html>
程序運行結果如圖4-1所示。
該例雖然看上去非常簡單，但是就像C語言中的helloworld一樣，不但五臟俱全，同時也是今後利用jQuery Mobile進行應用開發時最基礎的模板。
這實際上就是一個HTML頁面，但是仔細觀察會發現第5行有一句比較陌生的代碼：
- <meta name=”viewport” content=”width=device-width,initial-scale=1”>
這行代碼限定了頁面的寬度要與設備的寬度保持一致。因爲移動設備的種類實在是太多，作爲開發者，肯定沒有辦法考慮到每一種設備的兼容性，因此只有藉助於HTML本身來幫助我們。
接下來還有一個更加令人感到陌生的屬性initial-scale=1，這個屬性又是什麼意思呢？這裏可以來做一個實驗，將“1”改爲“2”運行之後看一下效果，結果如圖4-2所示。
圖4-1 helloworld 圖4-2 修改後的hello world
可以看到屏幕中的字體整個放大了一倍。原來initial-scale=1的作用是規定了頁面在加載時所要放大的倍數，等於1時即爲保持原尺寸不變。這在開發中有着巨大的作用。
目前，電腦屏幕的分辨大多是1366*768像素，而最近的一些以高分辨率爲亮點的智能手機的分辨率已經達到了720*1280像素，與此同時大多數人所使用手機的分辨率還停留 在一個較低的水平。這就導致瞭如果沒有一種切實可行的手段來區分這些用戶，開發人員就無法做到真正的完美用戶體驗。
那麼到底有沒有這樣一種方法呢？當然是有的，只要通過修改initial-scale屬性的值來放大頁面的內容尺寸，就能夠很好地實現不同設備上的兼容問題。在本篇最後的綜合項目實 例中將給出一個這樣的例子。
提示：meta是HTML中非常重要的一個標籤，但是它的應用卻常常被開發者所忽略。
如果您對學習跨平臺APP感興趣，如果您對jQuery Mobile感興趣，歡迎閱讀本書《構建跨平臺APP：jQuery Mobile移動應用實戰》
購買鏈接：
http://product.dangdang.com/23472199.html
http://item.jd.com/11459719.html
