Question

编辑：也可以使用$（'body'）。width（）和window.outerWidth

API 2.3.3 HVGA

旋转设备之前和之后输出相同的屏幕宽度（320）

API 3.0 WXGA

宽度和高度切换每个旋转，例如

以screenWidth开头：1280 screenheight：800 我旋转90 现在有screenWidth：800 screenheight：1280

所以如果我想对轮换进行某些更改，该怎么办？根据维度并希望定位所有API？我需要一个对所有设备都相同的值。

编辑：对于某些事情，我需要像素值，而不是百分比。这就是我使用Javascript根据屏幕宽度计算大小的原因。这可以工作，因为屏幕宽度也是像素值，我可以保持比例。但是如果有时screen.width给我当前的宽度，而有些则没有，我不能使用它......

- ＆GT;问题是我开始使用滑块，它使用绝对布局并且需要像素值。我不想重新实现滑块，因此我决定使用屏幕宽度动态计算图像的大小和整个布局。并使用这些值初始化滑块。

更新

这里看起来与我正在尝试的方法类似：

http://ryangillespie.com/phonegap.php#/phonegap.php？

2011年6月18日进入 “统一所有的一个屏幕决议”

我也尝试了这个例子，在我的代码中复制粘贴它。但它也不起作用。 window.outerWidth和我为screen.width描述的问题一样（以及JQuery $（'body'）。width（））。只要设备没有旋转，它就可以正常工作 - 它可以很好地初始化。但是在第一次旋转时，根据设备的不同，我会遇到问题。在某些情况下，它按预期工作，在其他情况下，它会交换值，因此我在纵向模式下获得较大的宽度，在横向上较短，在其他情况下，它始终提供固定的宽度和高度，而在其他情况下，它根本不会旋转。 ..

Answer 1

响应式网页设计技巧。我在我的博客上给出了一个超级简短的例子以及书籍推荐。

http://simonmacdonald.blogspot.com/2012/01/on-eight-day-of-phonegapping-multiple.html

Answer 2

我在两个PhoneGap应用中使用媒体查询。没有javascript，除了异常的情况。

例如，“base”css可以是宽度320和纵向，然后使用css的级联效果:-)添加块，如：

@media screen and（max-width：480px）and（orientation：portrait）{make stuff larger}

@media all和（min-width：800px）{make stuff更大}

在我的link'd css文件中使用这些查询（以及设备/ os / phonegap 处理方向变化）新的布局自动发生。

注意：我从阅读Simon的博客和他建议的材料中学到了所有这些。

Answer 3

巧合的是，我发现这有效：

$(window).resize(function() {
    updateScaling($('body').width());
});

始终调用此方法并传递正确的宽度。据我所知，它也适用于screen.width

在updateScaling中，我计算一个scalingFactor并调整我的元素。

我尝试了响应式CSS，媒体查询等等，但在某些时候它没有任何意义，因为我无论如何都要根据当前幻灯片和新的宽度重新计算滑块UL的余量 - 以及其他的东西需要脚本。所以我用脚本制作了一切。

我删除了window.onorientationchange。

Answer 4

我不知道phonegap如何为您提供信息，但对于原生Android应用程序，您通常会针对各种显示密度和屏幕尺寸/宽度声明不同的布局和图像资源。有关详细信息，请参阅此页面：http://developer.android.com/guide/practices/screens_support.html

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

4 个答案: