Safari móvil Reflow sin cambiar el tamaño - comportamiento de error

Editar 2 Esta pregunta está buscando una manera suave y limpia de texto de reflujo en el iPhone.Safari móvil Reflow sin cambiar el tamaño - comportamiento de error

Mejora de una aplicación web para tener 2 anchos diferentes (320 & 480) según la orientación. La intención también es tener 480 de ancho disponible para pantallas no móviles (es decir,> 480 de ancho). Está funcionando principalmente según lo deseado, excepto cuando la página se actualiza en formato horizontal. Esto hace que el diseño regrese a 320 (en el lado izquierdo) y deje una barra oscura a la derecha.

carga en Retrato

1. Portrait (after load)

Girar a Horizontal

2. Landscape (after rotate)

Actualizar en paisaje

3. Landscape (after refresh)

Se necesita que gira a vertical y viceversa para conseguir cambiar el tamaño y la imagen 2 de nuevo. Ese es un problema de usabilidad para mí. El tamaño de la página & gira muy bien en Android y es "de tamaño completo" en el escritorio.

¿Alguien sabe lo que me estoy perdiendo? He intentado muchas iteraciones de esto y he leído sobre un par de soluciones de errores. Ninguna de las ideas está cambiando el resultado. A punto de presentar un informe de error. Tengo la corazonada de que está en las líneas de la consulta de medios #container.

Editar: El sitio fue construido para móviles (320 de ancho). El deseo es expandir el uso del espacio cuando ese espacio esté disponible. La intención principal es tener elementos de texto & reflujo. Al mirar las fotos, observe la alineación de los campos de entrada con sus etiquetas.

He intentado 2 enfoques para que esto funcione. Otro era usar javascript para cambiar el ancho de #container. Actualmente se utiliza con las siguientes consultas de medios al final de la hoja de estilos en línea. Prefiero resolver esto con la consulta de medios.

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="utf-8"> 
    <meta name="HandheldFriendly" content="True"> 
    <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1, initial-scale=1"> 
    <meta name="apple-mobile-web-app-capable" content="yes"> 
    <title>The Title</title> 
    <style type="text/css"> 
     html { 
      margin: 0; 
      padding: 0; 
     } 
     body { 
      font: 14px Verdana, Geneva, Arial, Helvetica, sans-serif; 
     } 
     #container { 
      margin: auto; 
      width: 480px; 
     ..... 
     @media screen and (max-width: 480px) { 
      body { 
       -webkit-text-size-adjust: none; 
      } 
      #container { 
       max-width: 480px !important; 
       width: 100% !important; 
      }  
     } 
     @media screen and (max-width: 320px) { 
      body { 
       -webkit-text-size-adjust: none; 
      } 
      #container { 
       max-width: 320px !important; 
       width: 100% !important; 
      }  
     } 
    </style> 
     .....

Fuente

2012-06-11 David

Simplemente no indicaría un ancho o alto. Cuando lo haces, se establece automáticamente en la resucitación actual – Sirens

@TheDeveloper ¿A qué te refieres con "no indicar ancho o alto"? Quiero que el ancho de la página sea de 320 en vertical, 480 en horizontal ** y ** para configurar el contenido donde y como lo desee. – David

Consiguió un gran avance. Después de docenas de variaciones en las preguntas de los medios, este código ha 'roto' el problema:

function orientation_change() { 
    if (window.orientation == 0 || window.orientation == 180) 
     document.getElementById("viewport").setAttribute("content", "width=device-width, maximum-scale=1.0, initial-scale=1.0, user-scalable=no"); 
    else if (window.orientation == -90 || window.orientation == 90) 
     document.getElementById("viewport").setAttribute("content", "width=device-height, maximum-scale=1.0, initial-scale=1.0, user-scalable=no");  
}

con:

<body onload="orientation_change();" onorientationchange="orientation_change();">

Las preguntas de los medios de la pregunta original todavía se incluyen para reflujo el texto cuando ocurre una rotación Sin embargo, el problema de actualización parcial pantalla negra se ha ido. Información encontrada en Apple iOS Safari Web Content Guide. En particular, Manejo de eventos de orientación.

Espero que esto ayude en el proceso de Responsive Web Design.

Fuente

2012-06-11 17:20:35 David

+1 Aunque mi problema era más sutil, con frecuencia descubro que mi diseño no se reajustó después de rotar. Tu solución parece haber arreglado la mía también. ¡Gracias! – mckamey

Safari móvil Reflow sin cambiar el tamaño - comportamiento de error

Respuesta

Cuestiones relacionadas