Phonegap 应用程序的显示尺寸不正确
Posted
技术标签:
【中文标题】Phonegap 应用程序的显示尺寸不正确【英文标题】：Incorrect Display Size For Phonegap Applications 【发布时间】：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 border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="dibu"><table 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" 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" 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" 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" border="0" id="Image7" /></a></td>
</tr>
</table></td>
</tr>
</table>
</body>
请帮助，您的帮助将不胜感激。
【问题讨论】：
【参考方案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。
【讨论】：
以上是关于Phonegap 应用程序的显示尺寸不正确的主要内容，如果未能解决你的问题，请参考以下文章
为啥我的应用在 iPhone 12 mini 上显示的尺寸不正确？