jquery - デバイスに基づいてjqueryモバイルページに動的に高さを割り当てます

Question

私はjqueryモバイルが初めてです。私はモバイル アプリを作成しておりdata-role="page" 、すべてのデバイスの画面サイズにコンテンツを動的に合わせたいと考えています。効率の良いやり方とは？ヘッダーに設定する必要があるビューポートについて読みました。ページの高さと幅を調整するときにどのような役割を果たしますか?

ありがとうございました。

Answer 1

ここに jsFiddle があります: http://jsfiddle.net/ezanker/Tx4kF/

Ved が言及したメタ ビューポートの後、javascript を使用して、コンテンツ ペインで使用可能な高さを計算します。

function ScaleContentToDevice() {
   scroll(0, 0);
   var headerHeight = $("#jqmHeader:visible").outerHeight();
   var footerHeight = $("#jqmFooter:visible").outerHeight();
   var viewportHeight = $(window).height();

   var content = $("#jqmContent:visible");
   var contentMargins =  content.outerHeight() - content.height();

   var contentheight = viewportHeight - headerHeight - footerHeight - contentMargins;

   content.height(contentheight);
}

これは、body/html にマージンやパディングがないことを前提としています。

html, body {
   margin: 0;
   padding : 0;
}

pageshow イベントでスケーリングと向きの変更/サイズ変更を実行します。

$(document).on("pageshow", function(){
   ScaleContentToDevice();
});
$(window).on('resize orientationchange', function(){ ScaleContentToDevice() });