Phonegap 应用程序的显示尺寸不正确答案

【问题标题】：Incorrect Display Size For Phonegap ApplicationsPhonegap 应用程序的显示尺寸不正确
【发布时间】：2011-09-16 02:42:58
【问题描述】：

我们目前正在开发一款能够显示 HTML5 页面的手机间隙应用。 HTML 页面由一个表格组成，表格中填满了内容和图像。它加载到设备上，但加载的页面不适合屏幕。我们已将 HTML 元素的宽度设置为 100%，但页面仍然超出屏幕。

<body onload="MM_preloadImages('images/index_54-.png','images/index_52.png','images/index_53-.png','images/index-_54.png')">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="dibu"><table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center"><a href="index.html" target="neirong" onmouseover="MM_swapImage('Image4','','images/index_52.png',1)" onmouseout="MM_swapImgRestore()"><img src="images/index_52-.png" name="Image4" width="128" height="117" border="0" id="Image4" /></a></td>
    <td align="center"><a href="tssd.html" target="neirong" onmouseover="MM_swapImage('Image5','','images/index_54-.png',1)" onmouseout="MM_swapImgRestore()"><img src="images/index_53.png" name="Image5" width="128" height="117" border="0" id="Image5" /></a></td>
    <td align="center"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','images/index_53-.png',1)"><img src="images/index_54.png" name="Image6" width="128" height="117" border="0" id="Image6" /></a></td>
    <td align="center"><a href="zxxx.html" target="neirong" onmouseover="MM_swapImage('Image7','','images/index-_54.png',1)" onmouseout="MM_swapImgRestore()"><img src="images/index_55.png" name="Image7" width="128" height="117" border="0" id="Image7" /></a></td>
  </tr>
</table></td>
</tr>
</table>
</body>

请帮助，您的帮助将不胜感激。

【问题讨论】：

标签： ios cordova size screen

【解决方案1】：

您的目标是什么设备？您可能需要确保已将正文的宽度设置为 100%，以便浏览器明确知道制作表格的宽度，即；

html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

这将确保表格的所有父 DOM 节点都具有已知大小，因此表格可以正确呈现。要尝试的另一件事是在您的标题中添加一个元标记，以确保移动设备（我假设这就是您的目标）设置正确的显示尺寸；

<meta name="viewport" content="user-scalable=no, width=device-width,  initial-scale=1, minimum-scale=1,  maximum-scale=1"/>

如果您知道您想要的宽度，您可以将屏幕硬编码为该尺寸；

<meta name="viewport" content="user-scalable=no, width=480,  initial-scale=1, minimum-scale=1,  maximum-scale=1"/>

可能应该使用媒体查询来针对正确的设备（iPhone 3g .v. iPhone 4）等定位您的 css。

【讨论】：