Неверный размер дисплея для приложений PhoneGap - PullRequest
Новая
       20

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

2 голосов
/ 16 сентября 2011

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

Пожалуйста, помогите, ваша помощь будет высоко оценена.

1 Ответ

0 голосов
/ 17 сентября 2011

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

...