Question

我正在使用JQM构建智能手机和平板电脑的网站。我有一个使用gmap3显示Google地图的页面。我正在使用@media根据屏幕分辨率定义#map_canvas的大小。

一切都运行得很好，除了当设备的方向改变时，页面被放大（放大）。我该如何解决这个问题？

纵向视图没有问题（iPhone 4）

Portrait

当手机旋转时，页面会变大。但是当在横向视图中调用页面时，它看起来很好。

Landscape

这是我的代码。

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

页面结构

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

编辑：在初始加载时添加了横向视图的照片。

Landscape initial

Answer 1

使用jquery-ui-map结帐。这可能比gmap3

更好

如何防止JQM在旋转时调整屏幕大小？

1 个答案: