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

Question

当用户从横向旋转到纵向时,我正在遇到一个Android手机带应用程序的奇怪问题,但不是相反.

当屏幕从横向旋转到portait时,内容视口的高度似乎保持在先前的高度 - 但视口的宽度正确调整大小.以下图片试图表明这一点更清晰:

旋转到

我看到了这个问题:Android屏幕方向:风景回到肖像 ......但是虽然接受的答案可能是真的,但我并不完全确定那里有什么要求.

我只有一个带有默认配置的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()
            });

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

UPDATE

这似乎只是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 Partners