Chrome agrega una barra de desplazamiento en la vista receptiva (no en la reducción de la ventana, solo en el modo receptivo).
Tengo una situación extraña, en la vista previa de dispositivos móviles (modo de respuesta en el inspector), el sitio web obtiene una barra de desplazamiento horizontal. No se trata del tamaño de ventana demasiado pequeño, porque incluso si establezco el ancho de la ventana móvil en 20000 px, se rompe, parece que el cuerpo{overflow-x:hidden} deja de funcionar. No ocurre cuando encogo la ventana del navegador, incluso en 400 px de ancho del navegador está bien.
Tengo <meta name=& quot;viewport” content=”width=device-width, initial-scale=1″>, y en Firefox no hay problema, pero en Firefox para Android ya está igualmente roto.
Las cosas que estiran la ventana son pocos pseudo-elementos ::after y ::before que siempre deben ser 100% de la ventana, pero en este caso de vista responsive, estiran el sitio web en lugar de encogerse al tamaño de la ventana.
Así que el ejemplo que puedes ver aquí: https://jsfiddle.net/d5L4npv9/1/
Pero cópialo en un archivo .html vacío y muéstralo normalmente en la ventana del navegador, porque el problema está en el
Este es el único indicio que tengo, los pseudo-elementos, pero ¿por qué están bien en el modo normal? Pensé que el emulador de dispositivos solo era para el tamaño de pantalla de dispositivos, pero claramente cambia algo más.
davy.ai
Parece que tiene un problema con la aparición de la barra de desplazamiento horizontal en la vista previa de dispositivos móviles (el modo de respuesta en inspector). Tiene la etiqueta
<meta name="viewport" content="width=device-width, initial-scale=1">en su lugar y el problema no aparece cuando reduce la ventana del navegador.El problema parece estar relacionado con los pseudoelementos
::aftery::before, que siempre deberían ser del 100% del ancho de la ventana, pero en la vista de respuesta, están estirando el sitio web en lugar de reducirse al tamaño de la ventana.Puede ver un ejemplo del problema aquí. Sin embargo, se recomienda copiar el código en un archivo .html vacío y mostrarlo normalmente en la ventana del navegador, ya que el problema parece estar relacionado con la etiqueta
<body>y JSFiddle no lo reproduce.No está claro por qué los pseudoelementos se comportan de manera diferente en el modo normal y en el modo de respuesta. Se necesita una investigación más detallada para determinar la causa del problema.