IBM Worklight 6.0應用程序 - 使用jQuery Mobile的Windows Phone 8中的頁面呈現問題

我使用jQuery Mobile 1.3.2在Worklight 6.0中創建了一個簡單的應用程序。IBM Worklight 6.0應用程序 - 使用jQuery Mobile的Windows Phone 8中的頁面呈現問題

這是一個帶頁眉，內容和頁腳的單頁面應用程序。包括必要的jquery移動javascript和css文件。

下面給出的是應用程序中的html文件。

<!DOCTYPE HTML> 
<html> 
    <head> 
     <meta charset="UTF-8"/> 
     <title>DemoApp</title/> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"/> 
     <link rel="shortcut icon" href="images/favicon.png"/> 
     <link rel="apple-touch-icon" href="images/apple-touch-icon.png"/> 
     <link rel="stylesheet" href="css/DemoApp.css"/> 
     <link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css"/> 
     <script>window.$ = window.jQuery = WLJQ;</script> 

    </head> 
    <body id="content" style="display: none;"> 

     <div data-role="page"> 
      <div data-role="header"><h1>Header</h1></div> 
      <div data-role="content">Content</div> 
      <div data-role="footer" data-position="fixed"><h1>Footer</h1></div> 
     </div> 

     <script src="js/initOptions.js"></script> 
     <script src="js/DemoApp.js"></script> 
     <script src="js/messages.js"></script> 
     <script src="js/jquery.mobile-1.3.2.min.js"></script> 
    </body> 
</html>

我已經創建了Windows Phone 8環境並構建了worklight項目。在Windows Phone的Microsoft Visual Studio Express 2012的幫助下，應用程序在Windows Phone模擬器中啓動。

enter image description here

當我滾動屏幕我收到以下響應。

enter image description here

請提出一個方法來解決這個問題。

來源

2013-09-26 kingemerald

您可以向我們展示您正在使用DemoApp.css的應用程序CSS。嘗試禁用其中的默認CSS並再次運行。

這個問題似乎是有人告訴我，屏幕尺寸比實際設備尺寸大一些。

問候，貓王

來源

2013-09-26 12:35:45

DemoApp.css一個，簡稱，地址，文章，放在一邊，音頻，B，塊引用，身體，帆布，標題，引用代碼，DD，德爾，詳細信息dfn對話框div div dl dt dt em fieldset ffcaption圖形footer form h1 h2 h3 h4 h5 h6 header hgroup html iframe img ins kbd，label，legend，li，mark，menu，nav，object，ol，p，pre，q，samp，section，small，span，strong，sub，summary，sup，table，tbody，td，tfoot，th， thead，time，tr，ul，var，video {0} {0} {0}} {0} 填充：0; } ＃內容{ height：460px; margin：0 auto; width：320px; }我試着刪除所有默認的CSS，但我仍然遇到同樣的問題。 – kingemerald

如果你想固定頁眉/頁腳，在滾動的內容是什麼，然後再嘗試：

<div data-role="page" id="page1"> 
    <div data-role="header" data-position="fixed" data-tap-toggle="false"> 
     <h3>Header</h3> 
    </div> 
    <div data-role="content"> 
     Content 
    </div> 
    <div data-role="footer" data-position="fixed" data-tap-toggle="false"> 
     <h3>Footer</h3> 
    </div> 
</div>

分接開關切換設置爲禁用隱藏頁眉/頁腳，但是我沒有能夠獲得JQM固定頁眉/頁腳，除非我禁用它。

我也發現在Windows Phone 8上，頁腳會將自己定位得太高。所以，我必須添加以下的CSS：

@media screen and (orientation: portrait) { 
@-ms-viewport { 
    width: 320px; 
    user-zoom: fixed; 
    max-zoom: 1; 
    min-zoom: 1; 
} 
}

來源

2013-09-26 14:21:56

我試過這個，但同樣的問題存在。 – kingemerald

我無法重現你所看到的。我已經把你的HTML放到了一個新的WL V6應用程序中。我修改它以使用非縮小的jquery mobile和css（不應該）添加tap-toggle屬性，在內容中添加一些文本以便滾動某些內容，並添加上面的CSS修訂以移動頁腳下。結果是頁眉滾動，頁腳停留，應用程序不切換到半寬，如上所示。我正在使用WL Studio 6.0.0.2013917-1749和Visual Studio Express 11.0.60610.01 Update 3 –

IBM Worklight 6.0應用程序 - 使用jQuery Mobile的Windows Phone 8中的頁面呈現問題

回答

相關問題