2

I am new to web dev and android dev. I am developing a web app with phone gap and jquery mobile. The problem i am facing is that the when i change the orientation of the phone from potrait to landscape it expands. When i rotate my mobile back to potrait it comes back correctly but this time i cannot see the heading of my footer.

Please see the code

<body onload="onBodyLoad()">
<div data-role="page" data-iscroll="enable">
<div data-role="header" data-position="fixed" data-iscroll="scroller">
    <h1>Break IT !</h1>
</div><!-- /header --> 
<div data-role="content">
    <iframe id="cnt" width="100%" height="100%" frameborder="30" allowfullscreen></iframe>
</div>
<div data-role="footer" data-position="fixed" data-iscroll="scroller">
    <h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->

The meta data looks something like this.

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">

These are related and have been tried but to no avail

Screen Orientation Issue on Page using Jquery Mobile

Community
  • 1
  • 1
mu_sa
  • 2,685
  • 10
  • 39
  • 58

1 Answers1

0

Haven't tested your version, but I always use:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Your viewport, Don't have maximum-scale. Using above view-port value jquery mobile works fine for me on android, iphone.

Nachiket
  • 6,021
  • 6
  • 41
  • 47