screen.width和screen.height在不同的API/设备中具有不同的值



编辑:$('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

最新更新