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

Question

谁能推荐一种在 Phonegap 内置的 HTML5 Android 应用程序上检测屏幕宽度的好方法？

我们的页面相当流畅——但我需要为较小的屏幕切换 Logo /页脚图形——所以我为较小的版本注入(inject)了一个样式表——一般来说似乎工作正常，一些手机 (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这个 fiddle (调整结果大小)为 working demo .