html5 - quien - meta name="viewport" no funciona como se esperaba

quien gano masterchef españa 2018

Question

Tengo esa metaetiqueta en mi sitio web www.ssd-vergleichen.de

<meta name="viewport" content="width=device-width; initial-scale=1.0;"/>

Para evitar que el dispositivo haga un acercamiento inicial al sitio web. Cuando miro el sitio web en mi navegador móvil Chrome en Samsung Galaxy S2, el sitio web está aumentando en aproximadamente un 400%. ¿Qué hice mal? ¿Alguien puede ayudar?

Gracias por adelantado

Editar: con el uso

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

funciona en el navegador web estándar de Android, pero aún no en Chrome. Me pregunto si funciona en IOS.

Edit2: No, tampoco funciona con iOS http://iphonetester.com/

Answer 1

Has probado

<meta name="viewport" width="device-width">

Según tengo entendido, width="device-width" restringe el ancho del diseño al ancho del dispositivo. Seguramente al configurar intial-scale=1 está diciendo al navegador que amplíe al 100% (es decir, no a escala)?

Actualizar

<meta name="viewport" content="width=device-width, initial-scale=1;"/>

Está destinado a ser utilizado para escalar sitios receptivos correctamente. Teniendo en cuenta que su sitio está fijado a un ancho de 1100px, establecer initial-scale=1 no dará como resultado que toda la página sea visible.

Desde el W3C, use el elemento MetaViewport para identificar el tamaño de pantalla deseado

Answer 2

Prueba esto :

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=320, height=device-height, target-densitydpi=medium-dpi" />

Answer 3

Tratar:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

sin

Answer 4

Tuve el mismo problema hoy y pude solucionarlo jugando con el atributo target-densitydpi y configurándolo en alto mientras establezco el ancho en ancho del dispositivo

Al igual que:

<meta name="viewport" content="initial-scale=0.8, zoom=10%, width=device-width, target-densitydpi=high-dpi">

Esto resolvió mi problema.

Answer 5

Deberías escribir

<meta id="viewport" name="viewport" content="[your_content_params]" />

Intenté esto y funcionó.