html - name - meta tags ejemplos

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

Question

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 metaetiquetas funcionan bien en tabletas, donde el ancho del dispositivo es> 450px:

<!-- uses device width -->
<meta name="viewport" content="width=device-width" />

<!-- use of initial-scale means width param is treated as min-width -->
<meta name="viewport" content="width=450, initial-scale=1.0" />

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

<meta name="viewport" content="width=450" />

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).

Answer 1

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

<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
if (screen.width < 450){
    var viewport = document.querySelector("meta[name=viewport]");
    viewport.parentNode.removeChild(viewport);

    var newViewport = document.createElement("meta");
    newViewport.setAttribute("name", "viewport");
    newViewport.setAttribute("content", "width=450");
    document.head.appendChild(newViewport);
}
</script>

O simplemente inserte siempre en JavaScript:

<script>
var viewport = document.createElement("meta");
viewport.setAttribute("name", "viewport");
if (screen.width < 450) {
    viewport.setAttribute("content", "width=450");
} else {
    viewport.setAttribute("content", "width=device-width, initial-scale=1");
}
document.head.appendChild(viewport);
</script>

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:

<meta name="viewport" content="width=device-width, initial-scale=1.0, min-width=450" />
<script type="text/javascript" src="viewport-min-width.js"></script>

Answer 2

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 fuentes 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.

Answer 3

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

Aqui tienes :

<meta id="myViewport" name="viewport" content="width = 380">
<script>
window.onload = function () {
    var mvp = document.getElementById(''myViewport'');
    mvp.setAttribute(''content'',''width=580'');
}
</script> 

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

Answer 4

Prueba esto:

<meta id="vp" name="viewport" content="width=device-width, initial-scale=1">
<script>
window.onload = function() {
    if (screen.width < 450) {
        var mvp = document.getElementById(''vp'');
        mvp.setAttribute(''content'',''user-scalable=no,width=450'');
    }
}
</script>

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).

Answer 5

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:

<meta name="viewport" content="initial-scale=1.0, width=device-width, user-scalable=yes, minimum-scale=1.0, maximum-scale=2.0">

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