编辑:$('body').width()和window.outerWidth 也会发生
API 2.3.3 HVGA
旋转设备前后输出相同的屏幕宽度(320)
API 3.0 WXGA
宽度和高度切换每个旋转,例如
从屏幕开始宽度:1280屏幕高度:800我旋转90现在有屏幕宽度:800屏幕高度:1280
那么,如果我想对旋转进行某些更改,该怎么办根据维度,并希望以所有API为目标?我需要一个对所有设备都相同的值。
编辑:对于某些东西,我需要像素值,而不是百分比。这就是我使用Javascript根据屏幕宽度计算大小的原因。这是可行的,因为屏幕宽度也是像素值,我可以保持比例。但如果有时screen.width给了我当前的宽度,而其他人没有,我就不能使用它…
->问题是我开始使用一个滑块,它使用绝对布局,并且需要像素值。我不想重新实现滑块,所以我决定使用屏幕宽度动态计算图像的大小和整个布局。并使用这些值初始化滑块。
更新
这里有一个类似于我尝试做的方法:
http://ryangillespie.com/phonegap.php#/phonegap.php?
2011年6月18日条目"一屏分辨率统治他们所有"
我也尝试过在代码中复制粘贴这个例子。但它也不起作用。window.outerWidth与我在screen.width(以及JQuery$('body').width())中描述的问题相同。只要设备不旋转,它就可以工作——它初始化得很好。但在第一次旋转时,根据设备的不同,我会遇到问题。在一些情况下,它可以按预期工作,在另一些情况下它可以互换值,所以我在人像模式下得到大宽度,在风景模式下得到短宽度,在其他情况下它一直提供固定的宽度和高度,在另一种情况下它根本不旋转。。。。
响应式web设计技术。我在博客上举了一个非常简短的例子,并推荐了一本书。
http://simonmacdonald.blogspot.com/2012/01/on-eight-day-of-phonegapping-multiple.html
我在两个PhoneGap应用程序中使用媒体查询。没有javascript,除了异常情况。
例如,"基本"css可以用于宽度320和纵向,然后使用css的级联效果:-)添加块,如:
@媒体屏幕和(最大宽度:480px)和(方向:纵向){让东西更大}
@媒体所有和(最小宽度:800px){使东西更大}
在我的链接css文件中有这样的查询(以及设备/os/phonegap处理方向变化),新布局会自动神奇地发生。
注:我从西蒙的博客和他推荐的材料中学到了这一切。
巧合的是,我发现这是有效的:
$(window).resize(function() {
updateScaling($('body').width());
});
这总是被调用并通过正确的宽度。据我记忆所及,它也适用于屏幕宽度
在updateScaling中,我计算了一个scalingFactor并调整了我的元素。
我尝试了响应CSS、媒体查询等,但在某个时候,它不再有意义了,因为我可以根据当前幻灯片和新宽度以及其他需要脚本的东西,重新计算滑块UL的裕度。所以我用脚本做了所有的东西。
我删除了window.onororientationchange.
我不知道phonegap是如何为您提供信息的,但对于本机Android应用程序,您通常会为不同的显示密度和屏幕大小/宽度声明不同的布局和图像资源。有关详细信息,请参阅本页:http://developer.android.com/guide/practices/screens_support.html