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

前端之家收集整理的这篇文章主要介绍了PhoneGap / HTML5和Android屏幕调整大小问题,从横向旋转到纵向前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
用户从风景转为纵向,而不是其他方式时,我正在遇到一个 Android手机应用程序的奇怪问题.

当屏幕从横向旋转到端口时,内容视口的高度似乎保持在以前的高度 – 但视口的宽度正确调整大小.以下图片尝试显示更清楚一点:

旋转到

我看到这个问题:Android Screen Orientation: Landscape Back to Portrait
…但接受的答案可能是真的,我不完全确定在那里被要求什么.

我只有一个布局/ main.xml可以进行默认配置:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:orientation="vertical"
  4. android:layout_width="fill_parent"
  5. android:layout_height="fill_parent"
  6. >
  7. <TextView
  8. android:layout_width="fill_parent"
  9. android:layout_height="wrap_content"
  10. android:text="@string/hello"
  11. />
  12. </LinearLayout>

我也尝试了一些方向检测脚本,看看是否有帮助 – 我试过:

  1. var viewPortHeight = $(window).height();
  2. alert (viewPortHeight+" x "+$(window).width());
  3. var headerHeight = $('div[data-role="header"]').height();
  4. var footerHeight = 0;
  5. var contentHeight = viewPortHeight - headerHeight - footerHeight;
  6.  
  7. // Set all pages with class="page-content" to be at least contentHeight
  8. $('div[class="page-content"]').css({'min-height': contentHeight + 'px'});

并且

  1. var devInfo = new DeviceInformation();
  2. devInfo.setOrientation(0);
  3. time_column_count = Math.floor(viewport.height / 270);
  4. devInfo.setResolution({
  5. height : $(window).width(),width : $(window).height()
  6. });

但是 – 没有骰子.这里有什么想法吗?

UPDATE

这只是ICS设备上的一个问题 – 在遇到此问题的设备上,横向模式实际上存在滚动问题. JQM Scroll用于在不同的div上启用滚动.

解决方法

我有一个类似的问题与phonegap一会儿.以下代码应该可以帮助您解决这个问题.

1 – 确保在html文件的头部中调用phonegap.js文件

2 – 在html页面的头部添加以下元标记

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

3 – 在onDeviceReady()中添加一个事件监听器

  1. <script type="text/javascript">
  2. function onDeviceReady()
  3. {
  4. document.addEventListener("orientationChanged",updateOrientation);
  5. }
  6. </script>

4 – 如果要对差异方向(可能不同的图像)添加特定更改,请使用类似的switch语句

  1. function updateOrientation()
  2. {
  3. var e = window.orientation;
  4. switch(e)
  5. {
  6. case 0:
  7. // PORTRAIT
  8. break;
  9.  
  10. case -90:
  11. // LANDSCAPE
  12. break;
  13.  
  14. case 90:
  15. // LANDSCAPE
  16. break;
  17.  
  18. default:
  19. //PORTRAIT
  20. break;
  21. }
  22. }

5 – 在关闭JavaScript标签添加以下样式

  1. <style>
  2. [data-role=page]{height: 100% !important; position:relative !important; top:0 !important;}
  3. </style>

请尝试以上,让我知道如果它的工作,如果不是还有一些其他方法可以采取.

谢谢,L& L合作伙伴

猜你在找的HTML5相关文章