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

Question

编辑：也发生与$（'body'）。width（）和window.outerWidth

API 2.3.3 HVGA

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

API 3.0 WXGA

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

以screenWidth：1280屏幕高度开始：800我旋转90现在有screenWidth：800屏幕高度：1280

因此，如果我想根据尺寸对旋转进行某些更改并想定位所有API，该怎么办？ 我需要一个对于所有设备都相同的值。

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

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

更新

看看这里是与我尝试执行的操作类似的方法：

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，除非出现异常情况。

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

@media屏幕和（最大宽度：480像素）和（方向：肖像）{使内容变大}

@media all和（最小宽度：800px）{使内容更大}

通过在链接的CSS文件中进行类似的查询（以及方向更改的device / 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