如何更改div的移動方向與jquery mobile

Question

我是jquery mobile新手。我想更改橫向上的HTML。如果用戶縱向顯示圖像和文字（旋轉到橫向），如果用戶旋轉他的手機，則顯示主要內容。

Answer 1

在你的頁面有在縱向模式下該消息的DIV，然後在橫向模式下的常規內容單獨DIV：

<div data-role="page" id="page1"> 
    <div id="head" data-role="header"> 
     <h1>Page 1</h1> 
    </div> 
    <div id="cont" role="main" class="ui-content"> 

     <div id="portrait"> 
      <img src="http://lorempixel.com/300/180/technics/1/" /> 
     <p>Please turn your device to Landscape mode</p> 
     </div> 
     <div id="landscape"> 
     You are now ready to go! 
     </div> 
    </div> 
</div> 

然後使用orientationChange事件來顯示相應的DIV：

$(window).on("orientationchange", function(event) { 
    if (event.orientation == "portrait"){ 
    $('#portrait').show(); 
    $('#landscape').hide(); 
    } else { 
    $('#portrait').hide(); 
    $('#landscape').show();  
    } 
}); 

$(document).on("pagecreate","#page1", function(){ 
    $(window).trigger("orientationchange"); 
}); 

DEMO

如果運行在PC上的演示中，調整窗口的大小瑟它改變了。