PhoneGap - надежное определение ширины страницы? - PullRequest
Новая
       19

PhoneGap - надежное определение ширины страницы?

2 голосов
/ 12 марта 2012

Кто-нибудь может порекомендовать хороший способ определения ширины экрана в приложении Android для HTML5, встроенном в PhoneGap?

Наша страница достаточно плавная - но мне нужно переключить графику логотипа / нижнего колонтитула для небольших экранов - поэтому я добавляю таблицу стилей для небольших версий - в целом, кажется, работает нормально, некоторые телефоны (HTC Wildfire), кажется, думают, что они 320px Ширина, когда они только 240, поэтому я изо всех сил!

Это мой текущий код обнаружения - любые предложения будут очень полезны!

Приветствие Пол 

 $(document).ready(function() {
 var pageWidth = $(window).width();
 var sizeSelected = "chilliAppBeta";
 alert(pageWidth);adjustCSS();

 function adjustCSS(){
 if (pageWidth >= 0) { if(pageWidth < 300) {alert("smallscreen"); applyChilliCSS();}  }
 if (pageWidth >= 300) { sizeSelected = "chilliAppBeta" }
 }

 function applyChilliCSS() {
 var chilliStyleSheet =$('<link href="CSS/chilliAppBetaSmall.css" rel="stylesheet"        class="chilliLink" type="text/css"/>');

 $('head').append(chilliStyleSheet);

 }
 });

Ответы [ 3 ]

2 голосов
/ 14 марта 2012

Вам не нужен JavaScript для добавления дополнительных правил, основанных на размерах вашего экрана, вместо этого вы можете использовать CSS3 Media Queries, например: 

.smallScreenContent{
display: none;
}
@media (max-width:400px){ //the following rules will only be used for screens up to 400px width
.smallScreenContent{
display: block;
}
}​

См. Эту ссылку для спецификаций и этой скрипки (изменение размера результата) для рабочей демонстрации .

1 голос
/ 05 июня 2012

Единственный способ, которым я нашел правильное определение размера окна, - это установить тайм-аут на пару секунд, чтобы холст уместился на экране. При запуске он отображается в верхнем левом углу и разворачивается в соответствии с размером экрана только через некоторое время.

0 голосов
/ 12 марта 2012

Используйте 

$(window).width() // For width 
$(window).height() // For Height

В качестве альтернативы вы можете проверить ширину data-role="page" элемента, чтобы найти device-width (поскольку он установлен на 100% из device-width): 

var deviceWidth = 0;
$(window).bind('resize', function () {
    deviceWidth = $('[data-role="page"]').first().width());
}).trigger('resize');​​​
...