jquery mobile：デスクトップブラウザの幅と高さを設定する

Question

iphoneアプリケーションをエミュレートするためにjquery mobileを使用しています。デスクトップブラウザでコンテンツの幅と高さに問題があります。 幅の問題はそのように解決できます（width = 320pxとcontent align center）。

 
    html { background-color: #333; } 
    @media only screen and (min-width: 321px){ 
    .ui-page { 
     width: 320px !important; 
     margin: 0 auto !important; 
     position: relative !important; 
    } 
    } 

しかし、フッターの下には無駄な背景があります。 ui-pageのバックグラウンドは置き換え可能で、コンテンツのバックグラウンド（ヘッダーとフッターの間）に余分なdivを追加することができますが、より良い方法があるはずです。

コンテンツの幅と高さをデスクトップブラウザで開いたときの設定方法はどうですか？

更新： ここはexampleです。

Answer 1

あなたは、ページのロードに.ui-ページの高さを変更するためにはJavaScriptを使用することができます - ここではjQueryの例です：

$(document).ready(function(){ 

    if($(window).height() >= 480) 
    { 
     $('.iu-page').height(480); 
    } 

}); 

Answer 2

ページ要素の背景を削除して、コンテンツでそれを設定してみてください。

.ui-page.ui-body-c { 
    background: none transparent; 
} 

.ui-content { 
    background: #f0f0f0; 
}