0

ヘッダーとコンテンツ div を含む単純な jQuery Mobile Page を作成しました。コンテンツ div は、openlayers のマップ コンテナーとして機能する必要があります。マップは、ヘッダー バーを除いて画面全体を占める必要があります。

幅/高さ 100% のコンテンツ div のサイズ変更は機能しませんでした (何も表示されませんでした)。そのため、div をピクセル サイズにする CSS アプローチまたは相対サイズの回避策を探しています。

特に知りたいのは：

  • 画面の向きの変化 (横向き/縦向き) をどのように説明できますか?
  • レイアウトを「高さ伸縮自在」、つまりブラウザのアドレス バーの切り替えに耐えられるようにするにはどうすればよいですか?

これまでの私のマークアップは次のとおりです。

<body> 

<div data-role="page">

<div data-role="header">
    <h1>My Map</h1>
</div>

<div id="mapcontainer"  data-role="content">
     <!-- OpenLayers Map goes here -->          
</div>

</div>

</body>
4

3 に答える 3

0

まだテストしていませんが、これが機能するかどうかを確認してください。

ここで説明されているようにフルスクリーンモードを設定します：http：//jquerymobile.com/demos/1.0a2/#docs/toolbars/bars-fullscreen.html

#mapcontainerの幅と高さを100％に設定します（テスト時にコンテンツを追加します）

于 2011-01-19T08:11:48.137 に答える
0

コンテンツ div とそれを含む div の両方の幅設定を設定しようとしましたが、あなたの場合はページになると思いますか? モバイル ブラウザーでの私の経験では、高さと幅の両方を設定すると、電話が回転したときに問題が発生します。これは iPhone に限られています。

于 2011-01-18T14:05:52.617 に答える
0

OpenLayers は、ウィンドウの「サイズ変更」イベントをリッスンし、自動的に を呼び出しますmap.updateSize()。ここでは何もしません。

私の場合、ヘッダーなしで、次のコードが機能します。

<div data-role="page" id="map">
     <div id="olmap"></div>
</div>

#olmap, #map {
    height: 100%;
    width: 100%;
}
于 2011-01-20T09:54:32.960 に答える