Alcanzar el mínimo ancho con la metaetiqueta de la ventana gráfica

Me gustaría que el ancho de la ventana de mi página web sea igual al ancho del dispositivo siempre que el ancho del dispositivo sea > 450px o 450px de lo contrario (mi diseño se escala dinámicamente, pero no se ve bien por debajo de 450px de ancho).

Las siguientes dos metatags funcionan bien en tabletas, donde el ancho del dispositivo es> 450px:

    

sin embargo, en los teléfonos (donde, por ejemplo, ancho del dispositivo = 320px), el primero es demasiado delgado para el contenido; y esto último hace que el navegador haga un acercamiento, por lo que el usuario tiene que alejarse manualmente para ver el contenido.

Alternativamente, esta metaetiqueta funciona bien en teléfonos

  

pero no aprovecha el ancho adicional disponible en las tabletas.

Cualquier ayuda / idea sería realmente apreciada (y si hace la diferencia, estoy usando GWT).

Por lo tanto, desea cambiar el ancho de la etiqueta de la viewport de forma dinámica.

Aqui tienes :

   

Ver: http://www.quirksmode.org/mobile/tableViewport.html

Prueba esto:

   

Tenga en cuenta que he cambiado la "escala inicial = 1", ya que creo que la tuvo al revés. Desea que initial_scale se establezca en 1 cuando width = device-width, de modo que la página encaje exactamente en la ventana. Cuando establece un ancho de ventana gráfica específico, no desea establecer la escala inicial en 1 (de lo contrario, la página comenzará a ampliarse).

use una etiqueta @media y css. Funciona de maravilla. Aunque no proporciona un ancho mínimo para el puerto de visualización, esta es la mejor forma de hacerlo.

Esto es lo que hago para la ventana gráfica:

  

Luego ajusto el tamaño del panel adjunto al viewPort:

 @media all and (max-width: 1024px) { /*styles for narrow desktop browsers and iPad landscape */ .myContentPanel{ width: 450; } } @media all and (max-width: 320px) { /*styles for iPhone/Android portrait*/ .myContentPanel { width: 320; } } 

Obviamente también puedes tener tamaños intermedios …

Aquí hay más en otro ejemplo

El código JavaScript proporcionado en las otras respuestas no funciona en Firefox, pero funcionará si elimina la metaetiqueta e inserta una nueva.

   

O simplemente inserte siempre en JavaScript:

  

Para mi cordura, escribí un polyfill solo para agregar un atributo min-width a la metaetiqueta de la ventana gráfica:

Establecer min-width en la metaetiqueta de la ventana gráfica

Con esto, puedes hacer:

   

En resumen, no es necesario establecer min-width en la ventana gráfica, ya que puede establecerlo en body o html element en su lugar, para que tanto ellos como su contenido sean más anchos que viewport. El usuario podrá desplazarse o alejarse del contenido.

 body { min-width: 450px; } 

Hice algunas pruebas en Chrome para Android y escala las fonts de algunos elementos si el ancho de la ventana gráfica está configurado en cualquier otra cosa que no sea device-width del device-width . También shrink-to-fit=yes es útil para tener una página alejada inicialmente.

Por último, este enfoque es compatible con navegadores de escritorio que pueden tener tamaños de ventana extraños o configuraciones de zoom actuales (que afectan las dimensiones de la ventana informada), pero que no respetan la metaetiqueta de la ventana gráfica.