html5 - para - viewport definicion

¿Qué es escala inicial, escalable por el usuario, escala mínima y atributo de escala máxima en la metaetiqueta?

Question

Estaba revisando el código fuente de un sitio web y encontré este fragmento de código.

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

Quiero saber qué significan esta escala inicial, escalable por el usuario, escala mínima y escala máxima, y ​​qué significan esos valores. Y también dime qué valores aceptan todos.

Answer 1

Es para controlar aspectos en teléfonos móviles y tabletas. Encontrará más información aquí: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

Answer 2

Esta metaetiqueta es utilizada por todas las páginas web receptivas, es decir, aquellas que están diseñadas para adaptarse bien a los diferentes tipos de dispositivos: teléfono, tableta y computadora de escritorio. Los atributos hacen lo que dicen. Sin embargo, como se indica en MDN https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag ,

En las pantallas de alta resolución de dpi, las páginas con initial-scale=1 serán ampliadas de manera efectiva por los navegadores.

Descubrí que lo siguiente garantiza que la página se muestre con zoom cero de forma predeterminada.

<meta name="viewport" content="width=device-width, initial-scale=0.86, maximum-scale=3.0, minimum-scale=0.86">

Answer 3

Los siguientes son los atributos de las etiquetas de metadatos de la ventana gráfica

Ancho: el ancho de la ventana gráfica virtual del dispositivo. Ancho del dispositivo: el ancho físico de la pantalla del dispositivo. Altura: la altura de la "ventana gráfica virtual" del dispositivo. Altura del dispositivo: la altura física de la pantalla del dispositivo. Escala inicial: el zoom inicial al visitar la página. 1.0 no hace zoom. Escala mínima: la cantidad mínima que el visitante puede hacer zoom en la página. 1.0 no hace zoom. Maximum-scale: la cantidad máxima que el visitante puede hacer zoom en la página. 1.0 no hace zoom. escalable por el usuario: permite que el dispositivo se acerque y aleje. Los valores son sí o no.

Answer 4

Son metaetiquetas de ventanas y son más aplicables en los navegadores móviles.

ancho = ancho del dispositivo

Esto significa que le estamos diciendo al navegador "mi sitio web se adapta al ancho de su dispositivo".

escala inicial

Esto define la escala del sitio web. Este parámetro establece el nivel de zoom inicial, lo que significa que 1 píxel CSS es igual a 1 píxel de ventana gráfica . Este parámetro es útil cuando se cambia la orientación o se impide el zoom predeterminado. Sin este parámetro, el sitio receptivo no funcionará.

escala máxima

La escala máxima define el zoom máximo. Cuando accede al sitio web, la máxima prioridad es maximum-scale=1 , y no le permitirá al usuario hacer zoom.

escala mínima

La escala mínima define el zoom mínimo. Esto funciona igual que el anterior, pero define la escala mínima. Esto es útil cuando maximum-scale es grande y desea establecer minimum-scale .

escalable por el usuario

Escalable por el usuario asignado a 1.0 significa que el sitio web le permite al usuario acercar o alejar la imagen.

Pero si lo asigna a user-scalable=no , significa que el sitio web no permite al usuario acercarse o alejarse.

Answer 5

metaetiqueta de viewport gráfica en el navegador móvil,

La propiedad de escala inicial controla el nivel de zoom cuando se carga la página por primera vez. Las propiedades de escala máxima, escala mínima y escalabilidad del usuario controlan cómo los usuarios pueden acercar o alejar la página.

Answer 6

escalable por el usuario:

user-escalable = sí (predeterminado) para permitir al usuario acercar o alejar la página web;

user-scalable = no para evitar que el usuario amplíe o reduzca el zoom.

puede obtener más información detallada leyendo los siguientes artículos, ¡espero que sea útil para usted!

http://www.html-5.com/metatags/meta-viewport.html

https://css-tricks.com/snippets/html/responsive-meta-tag/

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta#Attributes

Código de demostración (recomendado)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=3.0">
</head>
<body>
    <header>
    </header>
    <main>
        <section>
            <h1>do not using <mark>user-scalable=no</mark></h1>
        </section>
    </main>
    <footer>
    </footer>
</body>
</html>