1

私はjquerymobileでグーグルマップを使用しています。jqm 1.2にアップグレードした後、マップはフルスクリーンで表示されません(モバイルおよびデスクトップブラウザー)。しかし、ブラウザウィンドウのサイズを変更すると、全画面表示になります(最初に画面を開いてほしい)。

私はインターネットで問題を検索し、それらのほとんどを試しましたが、どれも私には役に立ちませんでした。

あなたの提案は何ですか?

編集:jquery.ui.mapsを使用したときに解決しました。また、キャンバススタイルでwidth:100%を使用しないことが重要です。pagebeforeshowイベントでキャンバスのサイズを変更する代わりに

$('#map').live('pagebeforeshow',function(e,data){
    $('#map_canvas').height($(window).height() - (10 + $('[data-role=header]').height() - $('[data-role=footer]').height()));
});
<div data-role="page" id="map" data-add-back-btn="true" data-fullscreen="true" style="width:100%; height:100%;">
    <div data-role="header" data-position="fixed">                
        <h1 id="mapHeader">Konum</h1>                
        <a href="#menu"  data-role="button" data-icon="grid" class="ui-btn-right" data-theme="e" >Menu</a>                  
    </div>
    <div data-role="content" id="map_content" style="width:100%; height:100%; padding:0;">             
       <div id="map_canvas" style="position:absolute; width:100%; height:100%; min-height:100%;"></div>
    </div>          
</div>
4

0 に答える 0