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 screenheight: 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-8-day-of-phonegapping-multiple.html

Answer 2

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

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

@media screen and (max-width: 480px) and (orientation:portrait) { make stuff更大}

@media all and (min-width: 800px) { make stuff更大}

在我的链接CSS文件（以及device/os/phonegap
处理方向变化）新的布局会神奇地自动发生。

注意：我通过阅读西蒙的博客和他建议的材料了解到了这一切。

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/ screen_support.html