如何用jquery mobile改变移动方向的div

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上运行演示，请调整窗口大小以查看其更改。