JQMを使ってスマホ・タブレット向けのサイトを構築しています。gmap3を使用して Google マップを表示するページがあります。@media を使用して、画面解像度に基づいて #map_canvas のサイズを定義しています。
デバイスの向きが変更されたときにページがズームイン (拡大) されることを除いて、すべてが完全に正常に機能しています。どうすればこれを修正できますか?
縦表示でも問題なし（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>
ページ構造
<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>
編集:初期ロード時の横向きビューの写真を追加しました。
