El diseño web receptivo funciona en el escritorio, pero no en el dispositivo móvil

117

Tengo un sitio web que debe responder a los teléfonos móviles. Lo he creado usando mi escritorio. Cuando ajusto las ventanas del navegador, funciona perfectamente para el teléfono móvil, pero cuando lo verifico en mi teléfono móvil real: Samsung Galaxy S2 no responde a la vista móvil.

¿Qué podría estar mal?

mobile web responsive-design

— Tadas Davidsonas
fuente

1

Tendrá que agregar más información y código para que cualquiera sea útil. Su CSS, HTML, etc. Qué marco (como Twitter Bootstrap) está utilizando, si lo hay, etc.

— ajacian81

306

Probablemente le falte la metaetiqueta de la ventana gráfica en el encabezado html:

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

Sin él, el dispositivo asume y configura la ventana gráfica a tamaño completo.

Más info aquí .

— Agush
fuente

2

Puede funcionar en el navegador sin esta línea, pero en el móvil solo necesita esta línea.

— Tadas Davidsonas

3

Te amo

— Dimitris Filippou

Yo también te amo @ ΔημήτρηςΦιλίππου

— Agush

Otras palabras de amor para ti

— btlm

3

asegúrese de que la producción index.htmlrealmente incluya la etiqueta, así como el desarrolloindex.html

— halafi

6

También me he enfrentado a este problema. Finalmente obtuve una solución. Utilice este código a continuación. Esperanza: el problema se resolverá.

<meta name="viewport" content="initial-scale=1, maximum-scale=1">

— Saiful Islam
fuente

2

Aunque se respondió anteriormente y es correcto usar

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

pero si está utilizando React y webpack, no olvide cerrar la etiqueta del elemento

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

— Shadab Ahmed
fuente

-1

Metaetiqueta receptiva

Para garantizar una representación adecuada y el zoom táctil para todos los dispositivos, agregue la metaetiqueta de ventana gráfica receptiva a su archivo <head>.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

— Marcelo Austria
fuente