Las consultas de medios CSS son tu amigo.
Primero, léelos:
Consultas de medios CSS
- ¿Es posible obtener la ubicación de un dispositivo (físico, es decir, GPS) para un sitio web móvil? ¿O es una función exclusiva de aplicación nativa?
- ¿Cuáles son algunas de las mejores prácticas para el desarrollo web móvil para reducir el uso de ancho de banda?
- ¿Es posible cambiar el navegador predeterminado (Safari) de un iPhone?
- ¿Qué pequeño sitio web, aplicación móvil o herramienta de software siempre quisiste que alguien construyera?
- ¿Qué podría considerarse una técnica estándar para la detección / redirección móvil de un sitio web y cómo se implementaría de manera típica?
Luego, después de haber jugado con él, puede crear dos clases de CSS:
Una primera clase (“show-desktop”) para el contenido del sitio principal, pero que se oculta cuando se ve en un dispositivo móvil.
Otra clase (“show-mobile”) que normalmente está oculta, pero se muestra cuando se muestra en un dispositivo móvil.
css como este:
@media (ancho máximo: 600 px) {
.mostrar escritorio{
pantalla: ninguno;
}
.show-mobile {
bloqueo de pantalla; }
}
@media (ancho mínimo: 601px) {
.mostrar escritorio{
bloqueo de pantalla;
}
.show-mobile {
pantalla: ninguno;
}
}
HTML como este:
Por favor vea este sitio en una computadora. ¡Gracias!
Trabajar con estas clases de CSS puede ser un poco nervioso, por lo que llevará un tiempo acostumbrarse, pero los navegadores modernos se comportan bien con las consultas de medios.
¡Buena suerte!