Question

我对移动应用程序非常陌生。我正在使用phonegap开发移动应用程序。我创建了一个适合小屏幕的列表视图，即（320 * 480：mdpi）。如果我在大屏幕上运行相同的应用程序，即（480 * 800：mdpi），我的列表视图看起来非常小，适合屏幕。

有没有办法让html元素适合所有类型的移动设备？我怎么能这样做。有什么建议？

我的清单如下，

 <ul data-role="listview" id="locationList" data-dismissible="false" name="locationList" style="width: 285px; height: 150px; overflow: auto" data-inset="true">

Answer 1

您需要查看HTML页面的响应式设计。

使用元标记和CSS来决定特定的分辨率。

这是useful tutorial。

Answer 2

为什么OMG你为什么要这样做？每个jQuery Mobile小部件都已针对每个屏幕分辨率做出响应，包括listview小部件。您无需手动调整大小。想想看，你真的会为每个屏幕尺寸预定宽度和高度，这是荒谬的。

工作示例：http://jsfiddle.net/Gajotres/b433C/

<ul data-role="listview" id="locationList" data-dismissible="false" name="locationList" data-inset="true">
    <li><a>Element 1</a></li>
    <li><a>Element 2</a></li>
    <li><a>Element 3</a></li>
    <li><a>Element 4</a></li>                 
</ul>

正如您在此示例中所看到的，listview将根据屏幕大小调整大小，您无需亲自执行此操作。

如何使我的HTML元素适合所有移动设备（显示）？

2 个答案: