Los elementos de la página web responsiva se desplazaron incorrectamente en el navegador de iPad.
Problema: Desarrollé un sitio web de una sola página con Reactjs y lo implementé en Heroku (es una recreación de un sitio web existente. Quiero incluirlo como parte de mi portafolio para un trabajo de desarrollo web de nivel de entrada). Al inspeccionar en la barra de herramientas del dispositivo en Chrome, el sitio web responsive funcionó bien en la simulación de móviles e iPads. Cuando abro el sitio en mi iPhone7 Plus, también funciona bien. Pero cuando lo abro en un iPad real, varios elementos de sección no se posicionan como se esperaba, se superponen.
Los elementos afectados son elementos secundarios de un elemento contenedor que tiene el estilo CSS “overflow: auto; display: flex; flex-direction: column”. El efecto que quiero lograr es que todo el contenido principal (excepto el menú de navegación, el pie de página y la barra lateral) estén incluidos en un contenedor con capacidad de desplazamiento.
Enlace a una captura de pantalla del sitio web en el navegador de iPad: Captura de pantalla del sitio web en el navegador de iPad. He pasado algún tiempo tratando de buscar respuestas en Internet pero no he tenido suerte.
Pregunta: ¿Cómo puedo hacer que el sitio web responsive funcione correctamente en dispositivos iPad?
davy.ai
Solución para que el sitio web responsive funcione correctamente en dispositivos iPad
Hay algunas cosas que se pueden hacer para solucionar el problema de que el sitio web no se muestre correctamente en dispositivos iPad reales:
overflow: auto
, usaroverflow-y: scroll
para permitir solo el desplazamiento vertical.max-height: 100vh
para limitar la altura del elemento contenedor a la altura de la ventana de visualización.Esto asegurará que el elemento contenedor sea desplazable y no se superponga a otros elementos.
@media screen and (max-width: 768px)
para dirigirse a pantallas más pequeñas que iPads.Al implementar estas soluciones, el sitio web responsive debería funcionar correctamente en dispositivos iPad y otros dispositivos móviles. Es importante probar exhaustivamente el sitio web en diferentes dispositivos para asegurarse de que sea totalmente responsive y funcione correctamente para todos los usuarios.