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

Posted 2023-03-07

【中文标题】Phonegap - 可靠的页面宽度检测？

【英文标题】：Phonegap - reliable page width detection?

【发布时间】：2012-03-12 12:18:34

【问题描述】：

谁能推荐一种在 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);

 
 );

【问题讨论】：

我在 Phonegap 应用程序中使用了 jQuery 的 $(window).width() 和 .height()，它对我来说似乎工作得很好（也在我的 HTC Wildfire 上......）。您使用的是哪个版本的 Phonegap，您的目标 SDK 是什么？

另外，你有没有想过使用 CSS3 媒体查询来代替？

目标SDK为Andoid 2.2，Phonegap版本为webhosting.uk.com。为您的帮助干杯

Android 2+ 和 Phonegap 1.4 确实为我返回了正确的值（很高兴知道我不能相信这一点）。然后我会选择媒体查询，请参阅：jsfiddle.net/NLdLZ（调整结果大小）和w3.org/TR/css3-mediaqueries，如果您不知道那是什么。

干杯 m90，媒体查询是一种享受。如果您将您的回复作为答案，我会将其标记为正确。非常感谢您的帮助！

【参考方案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 的小提琴（调整结果大小）。

【参考方案2】：

我发现正确检测窗口大小的唯一方法是在几秒钟之前设置超时，让画布适合屏幕。启动时，它会显示在左上角，并且会在片刻后扩散以适应屏幕。

【讨论】：

“orientationchange”事件也是如此。顺便说一句，我只有在 Android 2.X 上才有这个奇怪的问题。在 Android 3.X 及更高版本上一切正常，没有超时。

好的，页面加载不需要超时。正确使用document.addEventListener("deviceready", function()/**/, true)

【参考方案3】：

使用

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

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

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

【讨论】：

他正在这样做，并要求另一种方法来做到这一点，因为它似乎不起作用......

嗨@m90 我添加了另一种方式:)

都不适合我 - 两者都会产生不正确的 320px 宽度响应！为你的帮助干杯..