Jquery mobile 如何防止JQM在旋转时调整屏幕大小？_Jquery Mobile_Media Queries

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

jquery-mobile

Jquery mobile 如何防止JQM在旋转时调整屏幕大小？,jquery-mobile,media-queries,Jquery Mobile,Media Queries,我正在使用JQM为智能手机和平板电脑建立一个网站。我有一个页面，显示了一个谷歌地图使用。我使用@media根据屏幕分辨率定义#map#u画布的大小一切都很正常，只是当设备的方向改变时，页面会放大。我怎样才能解决这个问题没有问题的纵向视图（iPhone 4）当手机旋转时，页面会放大。但是当在横向视图中调用页面时，它看起来很好。这是我的密码 <!DOCTYPE html> <html> <head> <title>Map</ti

我正在使用JQM为智能手机和平板电脑建立一个网站。我有一个页面，显示了一个谷歌地图使用。我使用@media根据屏幕分辨率定义#map#u画布的大小

一切都很正常，只是当设备的方向改变时，页面会放大。我怎样才能解决这个问题

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

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

这是我的密码

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


地图
$（函数（）{
$（'map#u canvas'）.gmap3({
标记：{
拉丁语：[36.491025，-4.951299]，
选项：{
中间：[36.491025，-4.951299]
},
},          
地图：{
地址：“西班牙马贝拉巴努斯港”，
选项：{
缩放：16，
mapTypeId:google.maps.mapTypeId.ROADMAP，
mapTypeControl:true，
mapTypeControlOptions：{
样式：google.maps.MapTypeControlStyle.DROPDOWN_菜单
},
导航控制：对，
滚轮：对，
街景控制：正确
}
}
});
});

页面结构

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


地图页

@媒体查询

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


#地图画布{
高度：768px；
宽度：1024px；
右边距：自动；
左边距：自动；
}
@仅媒体屏幕
和（最小设备宽度：768px）
和（最大设备宽度：1024px）{
#地图画布{
高度：768px；
宽度：1024px；
}
}
/*iPad（景观）----*/
@仅媒体屏幕
和（最小设备宽度：768px）
和（最大设备宽度：1024px）
和（方向：景观）{
#地图画布{
高度：768px；
宽度：1024px；
}
}
/*iPad（人像）----*/
@仅媒体屏幕
和（最小设备宽度：768px）
和（最大设备宽度：1024px）
和（方向：纵向）{
#地图画布{
宽度：768px；
高度：1024px；
}
}
/*iPhone4-（人像）----*/
@媒体
仅屏幕和（-webkit最小设备像素比：2）和（方向：纵向），
仅屏幕和（最小设备像素比：2）和（方向：纵向）{
#地图画布{
宽度：300px；
高度：400px；
边缘顶部：5px；
右边距：自动；
边缘底部：5px；
左边距：自动；
}
}
/*iPhone4-（横向）----*/
@媒体屏幕和（-webkit最小设备像素比：2）和（方向：横向），屏幕和（最小设备像素比：2）和（方向：横向）{
#地图画布{
宽度：400px；
高度：300px；
边缘顶部：5px；
右边距：自动；
边缘底部：5px；
左边距：自动；
}
}
/*智能手机（景观）----*/
@仅媒体屏幕
和（最小宽度：321px）
和（最大宽度：480px）{
#地图画布{
宽度：400px；
高度：300px；
边缘顶部：5px；
右边距：自动；
边缘底部：5px；
左边距：自动；
}
}
/*智能手机（肖像）*/
@仅媒体屏幕
和（最大宽度：320px）{
#地图画布{
宽度：300px；
高度：400px；
边缘顶部：5px；
右边距：自动；
边缘底部：5px；
左边距：自动；
}
}

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

使用签出。这可能比使用gmap3更好。这可能比

gmap3

更好。如果您最初在横向加载页面（而不是在页面加载后旋转），会发生什么情况？@AdamD它加载得非常好。我将很快添加一张横向视图的照片。因此，当您加载横向视图，然后旋转到纵向视图时，我假设您也有相同的问题？@AdamD页面的边距会发生变化，但不会放大。如果您最初在横向视图中加载页面（而不是在页面已加载后旋转），会发生什么情况？@AdamD它装载得非常好。我将很快添加一张横向视图的照片。因此，当你加载横向视图，然后旋转到纵向视图时，我假设你也有同样的问题？@AdamD页面的边距会更改，但不会放大。谢谢@Adam，我会检查它并让你知道。抱歉@Adam没有任何更改。问题出现了。这是我的新代码<代码>$（function（）{var yourstartatlng=new google.maps.LatLng（36.491025，-4.951299）；//Centers$（'map_canvas'）.gmap（{'center'：yourstartatlng}）$（'map#canvas'）.gmap（'option'，zoom'，16）$（'map#canvas'）.gmap（）.bind（'init'，function（evt，map）{$（'map#canvas'）.gmap'）.gmap（'addMarker''，{/*id:'m_1'，*/'position'：'36.491025，-4.951299'，'bounds'：false}）；//Marker}；}）我在@AdamD修复了它。

#map_canvas

应该在一个单独的分区中，而不是在相同的

内容分区中。所以答案是
谢谢@Adam我会检查它并让你知道。对不起@Adam没有任何变化。问题出现了。这是我的新代码。$（函数（）{var yourstartatlng=new google.maps.LatLng（36.491025，-4.951299）；//Centers$（'map_canvas'）.gmap（{'center'：yourstartatlng}）；$（'map_canvas'）.gmap（'option'，'zoom'，16）；$（'map#canvas'）.gmap（）.bind（'init函数（evt，map）{（'map#canvas'）.gmap（'addMarker'，{/*id:'m_1'，*/'position'：'36.491025，-4.951299'，bounds:false}）；//Marker}}}）；
我在@AdamD修复了它。#map_canvas
应该在一个单独的div中，而不是在相同的content
div中。因此答案是