PhoneGap的 - 可靠的页面宽度检测？ [英] Phonegap - reliable page width detection?
问题描述
任何人都可以推荐来检测内置的PhoneGap HTML5的Android应用程序的屏幕宽度的好办法？
我们的页面是合理的流体 - 但我需要切换标志的/页脚图形小屏幕 - 所以我注入一个样式表对于较小的版本 - 似乎工作总体不错，有些手机（HTC野火）似乎认为他们是320像素宽度时，他们只有240，所以我挣扎！
这是我目前的检测code - 任何建议将是很有益的。
！干杯
保罗
$（文件）。就绪（函数（）{
变种页宽= $（窗口）.WIDTH（）;
VAR sizeSelected =chilliAppBeta;
警报（页宽）; adjustCSS（）; 功能adjustCSS（）{
如果（页宽＆GT; = 0）{如果（页宽＆LT; 300）{警报（smallscreen）; applyChilliCSS（）;}}
如果（页宽＆GT; = 300）{sizeSelected =chilliAppBeta}
} 功能applyChilliCSS（）{
VAR chilliStyleSheet = $（'＆LT;链接HREF =CSS / chilliAppBetaSmall.css的rel =stylesheet属性类=chilliLink类型=文/ CSS/＆GT;'）; $（'头'）追加（chilliStyleSheet）。 }
}）;
您并不需要JavaScript来根据你的屏幕尺寸增加额外的规则，可以使用CSS3媒体查询，而不是这样的：
.smallScreenContent {
显示：无;
}
@media（最大宽度：400像素）{//下面的规则将只用于屏幕高达400像素宽度
.smallScreenContent {
显示：块;
}
}
Can anybody recommend a good way to detect screen width on a HTML5 Android App built in Phonegap?
Our page is reasonably fluid - but I need to switch logo's/footer graphics for smaller screens - so I inject a stylesheet for smaller versions - seems to work fine in general, some phones (HTC Wildfire)seem to think they are 320px width when they are only 240 so I'm struggling!
This is my current detection code - any suggestions would be really helpful!
Cheers Paul
$(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);
}
});
You don't need JavaScript to add additional rules based on your screen dimensions, you can use CSS3 Media Queries instead like:
.smallScreenContent{
display: none;
}
@media (max-width:400px){ //the following rules will only be used for screens up to 400px width
.smallScreenContent{
display: block;
}
}
See this link for specifications and this fiddle (resize the result) for a working demo.
这篇关于PhoneGap的 - 可靠的页面宽度检测？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
