Phonegap / HTML5 y la pantalla de Android redimensionan el problema en rotación de paisaje a retrato
Estoy experimentando un problema extraño con una aplicación de teléfono móvil Android ahora mismo cuando el usuario gira de paisaje a retrato, pero no al revés.
Cuando se gira la pantalla de paisaje a portait, la altura de la ventana de contenido parece permanecer en la altura anterior, pero el ancho de la ventana de visualización cambia de tamaño correctamente. Las siguientes imágenes intentan mostrar esto un poco más claro:
- Fragmentos de Android que conservan datos
- Imagen fuera de límites después de la transformación en la vista
- Uso de Matrix. Rotar en OpenGL ES 2.0
- Comprensión del uso de ImageView Matrix
- Metadatos de rotación de vídeo Mp4
Gira a
Vi esta pregunta: Android Orientación de pantalla: Paisaje Volver a Retrato … pero aunque la respuesta aceptada puede ser cierto, no estoy completamente seguro de lo que se está pidiendo allí.
Sólo tengo un layout / main.xml que lleva la configuración por defecto:
<?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>
También he intentado poner en alguna orientación de detección de secuencias de comandos para ver si eso ayuda – He intentado:
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'});
y también
var devInfo = new DeviceInformation(); devInfo.setOrientation(0); time_column_count = Math.floor(viewport.height / 270); devInfo.setResolution({ height : $(window).width(), width : $(window).height() });
Pero – no hay dados. ¿Alguna idea aquí?
ACTUALIZAR
Esto sólo parece ser un problema en los dispositivos ICS – y en realidad hay un problema de desplazamiento en modo horizontal en los dispositivos que están experimentando este problema. JQM Scroll se utiliza para activar el desplazamiento en las divs diferentes.
- ¿Cómo manejar pegatinas con redimensionar y rotar la funcionalidad?
- Rotar ImageView en Android <Nivel de API 11
- Rotar vídeo con mp4parser de acuerdo con la cámara utilizada
- Cómo rotar un dibujable por ObjectAnimator?
- Perder datos al girar la pantalla
- Rotación de imagen con opencv en android corta los bordes de una imagen
- Cómo deshabilitar / evitar Fragment animaciones personalizadas después de la rotación de la pantalla
- ¿Por qué se rota una imagen capturada con la intención de la cámara en algunos dispositivos de Android?
Tuve un problema similar con phonegap hace un tiempo. El código siguiente debería ayudarle a resolver este problema.
1 – Asegúrese de que el archivo phonegap.js se está llamando dentro de la cabecera del archivo html
2 – Agregue la siguiente metaetiqueta dentro de la cabecera de la página html
<meta name="viewport" content="width=device-width, initial-scale=1">
3 – Añadir un detector de eventos en el onDeviceReady ()
<script type="text/javascript"> function onDeviceReady() { document.addEventListener("orientationChanged", updateOrientation); } </script>
4 – Si desea agregar cambios específicos a las orientaciones de differnet, posiblemente imágenes diferentes, utilice una sentencia switch similar
function updateOrientation() { var e = window.orientation; switch(e) { case 0: // PORTRAIT break; case -90: // LANDSCAPE break; case 90: // LANDSCAPE break; default: //PORTRAIT break; } }
5 – Agregue el siguiente estilo después de su etiqueta de cierre javascript
<style> [data-role=page]{height: 100% !important; position:relative !important; top:0 !important;} </style>
Por favor, intente lo anterior y hágamelo saber si funciona, si no hay algunos otros enfoques que podría tomar.
Gracias, L & L Partners
Ir al archivo de manifiesto:
Dentro de la actividad agregue los siguientes atributos:
android:theme="@android:style/Theme.Translucent"
Estoy de acuerdo con el comentario anterior sobre el uso de metatag de viewport. Aunque quisiera añadir que también debe especificar la densidad de píxeles prevista para su diseño.
Una cosa que he encontrado para ser invaluable en la colocación de portait vs lanscape en dispositivos móviles es el uso de consultas de medios CSS. Esto le permitirá cambiar el estilo CSS de elementos de pantalla en los modos horizontal y vertical sin tener que confiar en javascript en absoluto.
Esto también permite un mejor control en la disposición de cosas para smartphone vs tableta también.
Tuve el mismo problema, pero con Intel xdk app marco con cordova construir pulg Para resolver el problema todo lo que hice fue hacer un nuevo proyecto, copiar todo lo que tenía en la anterior y reconstruir Córdoba en ella. Aunque esta vez, no agregué los complementos a través de la interfaz, pero sólo copié los archivos de configuración que estaban en mi proyecto anterior. Curiosamente, funcionó y ahora la ventana se ajusta muy bien. Así que mi conjetura es probablemente un problema con la versión o algo en los configs está mal.
Espero que ayudó de alguna manera.
PS lo siento por el pobre inglés
ACTUALIZACIÓN Parecía que el problema persistió cuando he construido la aplicación. Para resolver el problema (por ahora, ya que parece ser la única solución) es hacerlo.
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; } }
Funciona el 99% del tiempo (a veces no se ajusta correctamente, pero no sucede a menudo) y hay un poco de laging en la interfaz de unos pocos fotogramas. Si te preguntas por qué hay tiempo de espera en el paisaje es porque por alguna razón, obtiene anular por …. algo. No sé por qué cordova hace esto pero, por el momento, es la única manera que encontré para resolver este error.
Espero que ayude 😀
- No se puede instalar la versión de depuración y de liberación en el mismo dispositivo
- Fragmento se inicializa dos veces al recargar la actividad con pestañas cuando cambia la orientación