Question

当用户从横向旋转到纵向时，我现在遇到了一个关于android phonegap应用程序的奇怪问题，但不是相反。

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

Landscape view... 转到 ... and then portrait view

我看到了这个问题：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 - 如果要对不同的方向添加特定更改（可能是不同的图像），请使用类似的开关语句

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＆amp; L Partners

Answer 2

转到清单文件：

在活动内添加以下属性：

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

Answer 3

我同意之前关于使用viewport metatag的评论。虽然我想补充一点，你还应该为你的布局指定你想要的像素密度。

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

Answer 4

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

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

对不起英语很糟糕

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

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会这样做，但暂时是我发现解决这个bug的唯一方法。

希望它有所帮助:-D

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

4 个答案: