在从横屏旋转到竖屏时，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上的滚动。

- Kaiesh

---

你有没有尝试在根视图中添加android:layout_weight="1"？好像这是一个布局问题。 - Tom

似乎什么都没发生...而且只在ICS中出现，这真的很奇怪... - Kaiesh

Answer 1

我曾经遇到过类似的PhoneGap问题。下面的代码应该能帮助你解决这个问题。

1 - 确保在html文件的head部分调用了phonegap.js文件。

2 - 在html页面的head中添加以下meta标签：

<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 合伙人

- Raj

---

谢谢您提供的信息，但不幸的是它并没有起作用。我有以下元标记：'<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"><meta name="apple-mobile-web-app-capable" content="yes"/>'，我在我的脚本标签之后立即插入了您提供的样式片段，但没有任何改变... - Kaiesh

Answer 2

前往清单文件：

在活动内添加以下属性：

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

- sundar

---

我会尝试这个建议并告诉你它的效果如何！ - Kaiesh

Answer 3

我曾经遇到过同样的问题，但是是在使用内置cordova构建的Intel 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 为什么会这样做，但目前来说，这是我找到的唯一解决这个 bug 的方法。

希望对你有所帮助 :-D

- user3404416

Answer 4

我同意早期评论中使用viewport metatag的观点。不过，我认为您还应该为布局指定所需的像素密度。

在移动设备上进行纵向和横向布局时，我发现CSS媒体查询非常有用。这将允许您在横向和纵向模式下更改屏幕元素的CSS样式，而无需完全依赖于JavaScript。
这也可以更好地控制智能手机与平板电脑的布局。

- Mike Brant

---

我也使用媒体查询 - 我所有的CSS文件都支持纵向/横向媒体查询 - 使用类似'@media only screen and (min-width: 800px) and (orientation: portrait)'这样的结构来检测纵向平板电脑 - 但这并没有产生任何影响。 - Kaiesh