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

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

为什么天哪，你为什么要这样做？每个 jQuery Mobile 小部件都已经对每个屏幕分辨率做出响应，包括列表视图小部件。您不需要手动调整它的大小。想想看，你真的要为每个屏幕尺寸预定义宽度和高度吗，这很可笑。

工作示例：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会根据屏幕大小调整大小，你不需要自己做。