I created a simple android app, with Jquerymobile, with nothing too much, just pages and listview.
If it starts in Landscape mode, it works only this way, if the user changes the position Smartphone, the app automatically closes, and the same happens with landscape mode.
I do not understand why this behavior.
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
<style type="text/css">
h2
{
text-align: center;
}
h4
{
text-align: center;
}
img
{
height: auto;
width: auto;
}
</style>
</head>
<body >
<div data-role="page" id="one">
<div data-role="header" style="background-color:#E0FFFF">
<h1> </h1>
</div><!-- /header -->
<div data-role="content" >
<h2><b>Quem Somos</b></h2>
<p>A & é uma ótima oportunidade para pessoas que querem ganhar um dinheiro a mais. A empresa de venda social permite às mulheres ter seu próprio negócio
de moda ao tornar-se uma estilista, a qual é responsável pelas vendas das joias da marca. <br />
Os produtos são exclusivos, com características finas e delicadas, e elaborados por profissionais com mais de 10 anos de mercado, que fazem com total zelo e
dedicação a produção e finalização dos itens. Com a qualidade incomparável dos acessórios, será fácil vendê-los para familiares, amigas, conhecidas e
até mesmo em lojas virtuais e redes sociais – nas quais a divulgação é ainda mais prática e eficiente. <br />
O papel da estilista é auxiliar a potencial compradora a escolher as joias da marca que mais realçarão sua beleza. As vantagens de tornar-se uma são
inúmeras: a própria vendedora determinará seu horário de trabalho, quanto quer ganhar, a forma de abordagem às clientes e muito mais.<br />
Além disso, & disponibiliza ferramentas online para ajudar a estilista a conquistar clientes fiéis e oferece 50% de desconto para adquirir os
primeiros itens.<br />
O lucro vem de maneira rápida: com um investimento inicial de R$ 199,00, em até 6x, a mulher recebe um mostruário com valor total sugerido
de R$ 500,00. Além da renda extra obtida ao fazer parte do negócio de joias & , a estilista terá grandes recompensas pessoais, como reconhecimento
profissional, diversão ao trabalhar com algo prazeroso, autonomia para realizar as vendas, flexibilidade de horário e conquista da independência financeira. <br />
Sem dúvidas, ser uma parceira de negócios da & traz muitas vantagens para a <b>Mulher Moderna!</b></p>
</div><!-- /content -->
<div data-role="footer" data-theme="d" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#tendencias" >Tendências</a></li>
<li><a href="#two" data-transition="turn">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</div>
</div><!-- /footer -->
</div><!-- /page one -->
<!-- Start of second page: #two -->
<div data-role="page" id="tendencias" >
<div data-role="header" style="background-color:#E0FFFF">
<h1>Tendências</h1>
</div><!-- /header -->
<div data-role="content" >
<h4>Fique por dentro das tendências, siga as nossas dicas e arrase em seu Look</h4>
<ul data-role="listview" data-filter="true" data-filter-placeholder="Procure artigos" data-inset="true">
<li><a href="#artigo1">Terminologia das Pedras</a></li>
<li><a href="#">Banana</a></li>
<li><a href="#">Cherry</a></li>
<li><a href="#">Cranberry</a></li>
<li><a href="#">Grape</a></li>
<li><a href="#">Orange</a></li>
</ul>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#one" data-transition="turn">Pagina 1</a></li>
<li><a href="#two" data-transition="turn">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</div>
</div><!-- /footer -->
</div><!-- /page two -->
<!-- Start of third page: #popup -->
<div data-role="page" id="popup">
<div data-role="header" data-theme="e">
<h1>Dialog</h1>
</div><!-- /header -->
<div data-role="content" data-theme="d">
<h2>Popup</h2>
<p>I have an id of "popup" on my page container and only look like a dialog because the link to me had a <code>data-rel="dialog"</code> attribute which gives me this inset look and a <code>data-transition="pop"</code> attribute to change the transition to pop. Without this, I'd be styled as a normal page.</p>
<p><a href="#one" data-rel="back" data-role="button" data-inline="true" data-icon="back">Back to page "one"</a></p>
</div><!-- /content -->
<div data-role="footer" data-position="persistent">
<div data-role="navbar">
<ul>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</div>
</div><!-- /footer -->
</div><!-- /page popup -->
<!-- Tendências -->
<div data-role="page" id="artigo1" >
<div data-role="header" style="background-color:#E0FFFF">
<h1>Carnaval da Sofie</h1>
</div><!-- /header -->
<div data-role="content" >
<h2>TERMINOLOGIA DAS PEDRAS</h2>
<p>
A valorização de uma pedra pode vir de sua raridade, beleza pela cor, a um fenômeno óptico exclusivo, brilho diferenciado, além da dureza e inclusões exclusivas e únicas.
O termo gema geralmente refere-se a uma pedra já lapidada, algumas das características que valorizam as gemas só se apresentam depois da pedra estar lapidada.
A terminologia constantemente utilizada é de suma importância ser compreendida para não ocorrer duvidas sobre as pedras utilizadas na composição de uma joia.
Abaixo vemos as lapidações mais utilizadas.
</p>
<picture>
<img src="imagens/terminologiadaspedras.jpg" alt="pedras"/>
</picture>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#one" data-transition="turn">Home</a></li>
<li><a href="#tendencias" data-transition="turn">tendencias</a></li>
<li><a href="#">Three</a></li>
</ul>
</div>
</div><!-- /footer -->
</div><!-- /page two -->
</body>
<script src="jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="jquery.mobile/jquery.mobile-1.4.5.min.js" type="text/javascript"></script>
<link href="jquery.mobile/jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css" />
</html>