Phonegap/HTML5 和 Android 屏幕从横向旋转到纵向时调整大小问题

Question

当用户从横向旋转到纵向时，我现在在使用 android phonegap 应用程序时遇到了一个奇怪的问题，但反过来却没有。

当屏幕从横向旋转到纵向时，内容视口的高度似乎保持在之前的高度 - 但是视口的宽度会正确调整大小。以下图片试图更清楚地显示这一点：

旋转到

我看到了这个问题：Android Screen Orientation: Landscape Back to Portrait ...但是虽然接受的答案可能是正确的，但我并不完全确定那里要求的是什么。

我只有一个带有默认配置的layout/main.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<TextView  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="@string/hello"
    />
</LinearLayout>

我还尝试了一些方向检测脚本，看看是否有帮助 - 我已经尝试过：

    var viewPortHeight = $(window).height();
alert (viewPortHeight+" x "+$(window).width());
var headerHeight = $('div[data-role="header"]').height();
var footerHeight = 0;
var contentHeight = viewPortHeight - headerHeight - footerHeight;

// Set all pages with class="page-content" to be at least contentHeight
$('div[class="page-content"]').css({'min-height': contentHeight + 'px'});

还有

                var devInfo = new DeviceInformation();
            devInfo.setOrientation(0);
            time_column_count = Math.floor(viewport.height / 270);
            devInfo.setResolution({
                height  : $(window).width(),
                width : $(window).height()
            });

但是 - 没有骰子。这里有什么想法吗？

更新

这似乎只是 ICS 设备上的问题 - 在遇到此问题的设备上，横向模式下实际上存在滚动问题。 JQM Scroll 用于在不同的 div 上启用滚动。

Answer 1

前段时间我遇到了与 phonegap 类似的问题。下面的代码应该可以帮助您解决这个问题。

1 - 确保在 html 文件的头部调用 phonegap.js 文件

2 - 在 html 页面的头部添加以下元标记

<meta name="viewport" content="width=device-width, initial-scale=1"> 

3 - 在 onDeviceReady() 中添加一个事件监听器

<script type="text/javascript">
function onDeviceReady() 
{
    document.addEventListener("orientationChanged", updateOrientation);
}
</script>

4 - 如果您想为不同的方向添加特定的更改，可能是不同的图像，请使用类似的 switch 语句

function updateOrientation()
{
    var e = window.orientation;
    switch(e)
    {  
        case 0:
            // PORTRAIT
        break;

        case -90:
            // LANDSCAPE
        break;

        case 90:
            // LANDSCAPE
        break;

        default:
            //PORTRAIT
        break;
    }        
}

5 - 在结束 javascript 标记后添加以下样式

<style>
    [data-role=page]{height: 100% !important; position:relative !important; top:0 !important;}
</style>

请尝试以上方法，如果可行，请告诉我，如果不行，您可以采取其他一些方法。

谢谢， L & L 合伙人

Answer 2

转到清单文件：

在活动内部添加以下属性：

android:theme="@android:style/Theme.Translucent"

Answer 3

我同意之前关于使用视口元标记的评论。尽管我要补充一点，您还应该为布局指定预期的像素密度。

我发现在移动设备上布置纵向与横向布局时非常宝贵的一件事是使用 CSS 媒体查询。这些将允许您更改横向和纵向模式中屏幕元素的 CSS 样式，而无需完全依赖 javascript。
这也可以更好地控制智能手机和平板电脑的布局。

Answer 4

我遇到了同样的问题，但使用了内置 cordova 的英特尔 xdk 应用程序框架。 为了解决这个问题，我所做的只是做一个新项目，复制我在前一个项目中的所有内容并在其中重建cordova。尽管这一次，我没有通过界面添加插件，而只是复制了我之前项目中的配置文件。奇怪的是，它起作用了，现在视口调整得很好。所以我的猜测是它可能是版本的问题或者配置中的某些东西是错误的。

希望在某种程度上有所帮助。

P.S 对不起英语不好

更新 当我构建应用程序时，问题似乎仍然存在。解决问题（目前看来是唯一的解决方案）就是这样做。

window.addEventListener('orientationchange', doOnOrientationChange);
function doOnOrientationChange()
  {
    switch(window.orientation) 
    {  
      case -90:
      case 90:
                setTimeout(function(){
                var ScreenHeight = screen.height;
                document.body.style.height = '100%';
                window.innerHeight = ScreenHeight - (FOOTER HEADER);},100);
        break; 
      default:
            var ScreenHeight = screen.height;
            document.body.style.height = "100%";
            window.innerHeight = ScreenHeight - (FOOTER HEADER);
        break; 
    }
  }

它在 99% 的时间里都能正常工作（有时它不能正确调整，但并不经常发生），并且在几帧界面中会有一些滞后。如果您想知道为什么风景中有超时，因为出于某种原因，它会被....某物覆盖。我不知道为什么 cordova 会这样做，但目前，这是我发现解决此错误的唯一方法。

希望对你有帮助：-D