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

当用户从横向旋转到纵向时，我正在遇到android phonegap应用程序出现的奇怪问题，但不是其他方式。Phonegap/HTML5和Android屏幕调整大小问题从横向到纵向旋转

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

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

我看到了这样一个问题：Android Screen Orientation: Landscape Back to Portrait ......但在接受的答案可能真的，我不完全知道什么是被问到那里。

我只有一个布局/ 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的滚动功能。

来源

2012-07-07 Kaiesh

你有没有尝试添加android：layout_weight =“1”到根视图？好像它的布局问题.. – Tom 2012-07-08 08:36:51

这似乎没有做任何事情......它真的很奇怪，它只发生在ICS ... – Kaiesh 2012-07-09 10:22:08

我在回电话时遇到了类似的问题。下面的代码应该有望帮助你解决这个问题。

1 - 确保phonegap.js文件被称为HTML文件的头部

2中 - html页面

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

3机头内添加以下meta标签 - 在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合作伙伴

来源

2012-07-11 10:05:28

感谢你 - 但不幸的是它没有工作。我有以下元标记：' '我在脚本标记后插入了您提供的样式片段，但它没有区别... – Kaiesh 2012-07-11 17:21:33

我会使用视元标记较早的评论表示赞同。虽然我想补充一点，你还应该为你的布局指定你想要的像素密度。

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

来源

2012-07-17 14:05:42

我使用媒体查询以及 - 我的所有CSS文件都支持纵向/横向媒体查询 - 使用像'@media only screen和（min-width：800px）和（orientation：portrait）'这样的结构来检测纵向衬垫 - 但这没有任何区别。 – Kaiesh 2012-07-18 02:34:56

转到清单文件：

活动中添加以下属性：

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

来源

2012-12-19 12:10:29 sundar

我会检查这个建议，并让你知道它是怎么回事！ – Kaiesh 2012-12-21 01:24:37

我有同样的问题，但与科尔多瓦构建英特尔XDK应用框架要全部解决问题。我做的是做一个新项目，复制我在前一个项目中的所有内容，并重新编译它。尽管这次我没有通过界面添加插件，但只复制了我之前项目中的配置文件。奇怪的是，它的工作，现在视口调整得很好。所以我的猜测是它可能是一个版本问题或配置中的错误。

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

P.S遗憾的英文不好

UPDATE 似乎当我构建的应用程序仍然存在问题。要解决这个问题（目前看来是唯一的解决方案）就是做这件事。

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％，有一点在接口laging几帧。如果你想知道为什么在景观中出现超时，那是因为某种原因，它会被......所覆盖。我不知道为什么科尔多瓦这样做，但暂时来说，它是我发现解决这个错误的唯一方法。

希望它有帮助：-D

来源

2015-04-20 17:52:07 user3404416

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

回答

相关问题