13

当用户从横向旋转到纵向时，我现在遇到一个 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 上启用滚动。

4

4 回答 4

8

前段时间我遇到了与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 合作伙伴

于 2012-07-11T10:05:28.937 回答
1

转到清单文件：

在活动内添加以下属性：

android:theme="@android:style/Theme.Translucent"
于 2012-12-19T12:10:29.817 回答
0

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

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

于 2012-07-17T14:05:42.940 回答
0

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

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

PS对不起英语不好

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

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

希望它有所帮助:-D

于 2015-04-20T17:52:07.490 回答