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

【问题标题】：screen.width and screen.height different values in different APIs/devicesscreen.width 和 screen.height 不同 API/设备中的不同值
【发布时间】：2012-02-17 19:32:45
【问题描述】：

编辑：也发生在 $('body').width() 和 window.outerWidth

API 2.3.3 HVGA

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

API 3.0 WXGA

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

从屏幕宽度开始：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()）。只要设备不旋转，它就可以工作 - 它初始化良好。但是在第一次旋转时，取决于设备，我会遇到问题。在某些情况下它按预期工作，在其他情况下它会交换值，因此我在纵向模式下获得大宽度而在横向模式下获得短宽度，在其他情况下它始终提供固定的宽度和高度，在其他情况下它根本不旋转.. ..

【问题讨论】：

标签： android api cordova screen dimensions

【解决方案1】：

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

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

【讨论】：

我编辑了我的帖子：编辑：对于某些事情，我需要像素值，而不是百分比。这就是我使用 Javascript 根据屏幕宽度计算大小的原因。这会起作用，因为屏幕宽度也是像素值，我可以保持比例。但是如果有时 screen.width 给了我当前的宽度，而其他人没有，我不能使用它......
是的，我在下面回答，但应该提到我的 2.3.5 设备的行为与您的设备相似（检查设备宽度总是像在纵向模式下一样）。我的 Android 3.1 设备报告正确的设备宽度/高度，但报告方向“向后”。像我在下面那样使用媒体查询有助于在一定程度上解决这些问题。

【解决方案2】：

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

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

@media screen and (max-width: 480px) and (orientation:portrait) { 让东西变大}

@media all and (min-width: 800px) { 让东西变得更大 }

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

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

【讨论】：

【解决方案3】：

巧合的是，我发现这是可行的：

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

这总是被调用并传递正确的宽度。据我记得它也适用于 screen.width

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

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

我删除了 window.onorientationchange。

【讨论】：

【解决方案4】：

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

【讨论】：

是的，我知道。但我想使用当前屏幕宽度（水平）进行某些计算。