我们目前正在开发一款能够显示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>
请帮忙,你的帮助会受到很大的帮助。
答案 0 :(得分:0)
您定位的是什么设备?您可能需要确保将主体的宽度设置为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"/>
可能应该使用媒体查询来定位您的css以获得合适的设备(iPhone 3g .v.iPhone 4)等。