Wie div auf die Ausrichtung des mobilen mit jquery mobile

Question

ich bin neu in jquery mobile. Ich möchte HTML auf Landschaft ändern. Wenn Benutzer im Hochformat Bild und Text anzeigen (in Querformat drehen), wird der Hauptinhalt angezeigt, wenn der Benutzer sein Handy dreht.

Answer 1

In Ihrer Seite ein DIV für die Nachricht im Portrait-Modus und dann ein separates DIV für den regelmäßigen Inhalt im Querformat:

<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> 

dann das orientationChange Ereignis verwenden Sie die entsprechende DIV zu zeigen:

$(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

Wenn Sie die Demo auf einem PC laufen, die Größe des Fensters zu se e es ändert sich.