Question

有人可以推荐一种在Phonegap内置的HTML5 Android应用中检测屏幕宽度的好方法吗？

我们的页面相当流畅 - 但我需要为较小的屏幕切换徽标/页脚图形 - 所以我为较小的版本注入样式表 - 似乎一般工作正常，有些手机（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);

 }
 });

Answer 1

您不需要JavaScript根据屏幕尺寸添加其他规则，您可以使用CSS3媒体查询来代替：

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

请参阅specifications的此链接以及working demo的小提琴（调整结果大小）。

Answer 2

我发现正确检测窗口大小的唯一方法是在画布适合屏幕之前放置几秒钟的超时。在发布时，它显示在左上角，并且仅在一段时间后展开以适应屏幕。

Answer 3

使用

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

或者，您可以检查data-role="page"元素的宽度以找到device-width（因为它设置为100%的{{1}}）：

device-width

Phonegap - 可靠的页面宽度检测？

3 个答案: