0

我创建了一个带有标题和内容 div 的简单 jQuery Mobile 页面。内容 div 应该作为 openlayers 的地图容器。地图应该填满整个屏幕，除了标题栏。

使用 100% 的宽度/高度调整内容 div 的大小不起作用（没有显示任何内容），因此我正在寻找一种 CSS 方法来对 div 进行像素大小或相对大小的解决方法。

我特别想知道：

  • 我如何解释屏幕方向的变化（横向/纵向）？
  • 我怎样才能使我的布局“高度弹性”，即抵抗浏览器地址栏的切换？

到目前为止，这是我的标记：

<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

您是否尝试过为内容 div 和它包含的 div 设置宽度设置，我猜在您的情况下会是页面？我在移动浏览器上的经验是，同时设置高度和宽度会在手机旋转时出现问题。这仅限于 iPhone，当然。

于 2011-01-18T14:05:52.617 回答
0

我还没有测试它，但看看这是否有效：

按照此处所述设置全屏模式：http: //jquerymobile.com/demos/1.0a2/#docs/toolbars/bars-fullscreen.html

并将#mapcontainer宽度和高度设置为100％（并在测试时将一些内容放入其中）

于 2011-01-19T08:11:48.137 回答
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 回答