Неправильный размер дисплея для приложений Phonegap

В настоящее время мы разрабатываем приложение для телефона, которое сможет отображать страницы 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 screen size
person user948036    schedule 16.09.2011    source источник

Ответы (1)


arrow_upward
0
arrow_downward

На какое устройство вы ориентируетесь? Возможно, вам потребуется убедиться, что вы установили ширину тела на 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) и т. д.

person Mike P    schedule 16.09.2011