'How to prevent JQM from resizing screen on rotate?

I am building a website for smartphones and tablets using JQM. I have a page which shows a Google map using gmap3. I am using @media to define the size of the #map_canvas based on screen resolution.

Everything is working perfectly well, except that when the device's orientation is changed, the page gets zoomed-in (enlarged). How can I fix this?

Portrait view with no problems (iPhone 4)

Portrait

When the phone is rotated, the page gets enlarged. But when the page is called in landscape view, it looks fine.

Landscape

Here's my code.

<!DOCTYPE html> 
<html> 
<head> 
<title>Map</title> 
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 

<!--JS and CSS links where removed to save space-->

<script type="text/javascript">
 $(function(){
    $('#map_canvas').gmap3({
 marker:{
latLng:[36.491025,-4.951299],
  options:{
  center:[36.491025,-4.951299]
  },
},          
    map:{
  address:"Puerto Banus, Marbella, Spain",
  options:{
    zoom:16,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    mapTypeControl: true,
    mapTypeControlOptions: {
      style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    },
    navigationControl: true,
    scrollwheel: true,
    streetViewControl: true
  }
}

    });
  });

</script>

Page structure

<body> 
<div data-role="page" data-theme="b">
<div data-role="header"><h1>Map Page</h1></div>
    <div data-role="content" id="map_canvas">
</div> <!-- /content-->
</div> <!-- /page-->

</body>

@media query

<style>
#map_canvas {
height: 768px;
width: 1024px;
margin-right:auto;
margin-left:auto;
}

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
#map_canvas {
height: 768px;
width: 1024px;
 }
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
#map_canvas {
height: 768px;
width: 1024px;
  }
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
#map_canvas {
width: 768px;
height: 1024px;
  }
}

/* iPhone 4 - (portrait) ---------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 2) and (orientation:portrait),
only screen and (min-device-pixel-ratio : 2)  and (orientation:portrait){
   #map_canvas {
width: 300px;
height: 400px;
margin-top: 5px;
margin-right: auto;
margin-bottom: 5px;
margin-left: auto;
 }
}

/* iPhone 4 - (landscape) ---------- */
@media screen and (-webkit-min-device-pixel-ratio : 2) and (orientation:landscape), screen and (min-device-pixel-ratio : 2) and (orientation:landscape){
#map_canvas {
width: 400px;
height: 300px;
margin-top: 5px;
margin-right: auto;
margin-bottom: 5px;
margin-left: auto;
  }
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px)
and (max-width: 480px) {
  #map_canvas {
width: 400px;
height: 300px;
margin-top: 5px;
margin-right: auto;
margin-bottom: 5px;
margin-left: auto;
  }
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
    #map_canvas {
width: 300px;
height: 400px;
margin-top: 5px;
margin-right: auto;
margin-bottom: 5px;
margin-left: auto;
    }
}

</style>

EDIT: Added photo of a landscape view on initial load.

Landscape initial

jquery-mobile media-queries

Solution 1:^[1]

Check out using jquery-ui-map. It might be a better way than gmap3

Solution 2:^[2]

You can force your viewer to look at your site in landscape mode. You can see what I did at https://www.bluepitt.com where if your looking at the site in portrait, I have a picture that covers up the site that tells the viewer to rotate to landscape. When they turn to look at landscape, the picture disappears and your designed page displays. Here is the code you place in the body of your site:

<div id="wrapper">
<!-- your html for your website -->
</div>

<div id="warning-message">

<img src="warning.png" width="1000" height="1770" alt=""/> </div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	adamdehaven
Solution 2	Dean De Witt

'How to prevent JQM from resizing screen on rotate?

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]