有人可以推荐一种在 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);
}
});
最佳答案
您不需要 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 .
关于jquery - Phonegap - 可靠的页面宽度检测？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9666870/