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屏幕調整大小問題從橫向到縱向旋轉

回答

相關問題