展示jQuery Mobile

網頁以jQuery Mobile完成之後，則可以手機或平板瀏覽，但若是以電腦的瀏覽器瀏覽時，則可能與實際結果有所出入。我們可以試著加入手機或平板的圖片，並以<iframe>網頁標籤將jQuery Mobile網頁置於圖片之中，產生如同以手機或平板的瀏覽效果。

例如以下手機圖片：

其中圖片尺寸分別為380px (Height) 與700px (Width)、白色矩形的右上角分別為27px (Top) 與85px (Left)、長寬分別為320px (Height) 與533px (Width)，藉此設定以下CSS：

#preview {
  height: 380px;
  width: 700px;
  background: url(images/phone_landscape.png) 
    center no-repeat;
}

#preview iframe {
  width: 533px;
  height: 320px;
  top: 27px;
  left: 85px;
}

並在HTML網頁中，以下列方式顯示jQuery Mobile網頁 (demo.html)：

【執行結果】

同樣的，以相同方式處理平板，以下為平板圖片：

其中圖片尺寸分別為640px (Height) 與1050px (Width)、白色矩形的右上角分別為70px (Top) 與125px (Left)、長寬分別為500px (Height) 與800px (Width)，藉此設定以下CSS：

#preview {
  height: 640px;
  width: 1050px;
  background: url(images/smalltablet_landscape.png) 
    center no-repeat;
}

#preview iframe {
  width: 800px;
  height: 500px;
  top: 70px;
  left: 125px;
}

並在HTML網頁中，以下列方式顯示jQuery Mobile網頁 (demo.html)：

【執行結果】

© Chia-Hui Huang