Cómo imprimir un mensaje de error si no se puede optimizar como un sitio web móvil

Las consultas de medios CSS son tu amigo.

Primero, léelos:

Consultas de medios CSS

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:

.. contenido del sitio principal

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!

Utilice consultas de medios CSS que le permitan especificar el ancho de pantalla mínimo o máximo para un conjunto de reglas CSS.

De esa manera, solo oculta el mensaje de página completa de forma predeterminada y muéstralo solo cuando el tamaño de la pantalla esté por debajo de un ancho específico.

More Interesting

Cómo evitar errores comunes durante la optimización del sitio móvil

Cómo deshabilitar la regla CSS ': hover' para navegadores de dispositivos táctiles iPhone y iPad

¿Cuáles son las tres configuraciones posibles para un sitio móvil? cuál prefieres y por qué?

¿Cuáles son las principales diferencias entre el sitio web móvil y el diseño móvil?

¿Cuáles son las mejores y más rentables herramientas / enfoques (baratos) para probar sitios en navegadores móviles?

¿Es una "aplicación web móvil" una que no está instalada en ningún dispositivo o es simplemente una aplicación creada utilizando estándares web (tal vez luego empaquetada e instalada)?

¿Hay alguna manera de que un espía escuche los paquetes enviados a través de la conexión de datos de un teléfono celular si no se usa https?

Si el tema secundario no es compatible con dispositivos móviles, ¿cargará el tema principal compatible con dispositivos móviles para dispositivos móviles?

¿Qué ventajas tiene una aplicación sobre un sitio móvil?

¿Cómo puedo desactivar la función de cambio de tamaño (en más pequeño) de cualquier navegador web cuando alcanza un ancho de 320 px?

¿Tengo que crear un sitio web antes de crear una aplicación como Uber o OlaCab?

¿Se requieren migas de pan para un sitio web móvil?

Tengo un sitio web móvil, ¿por qué necesito una aplicación móvil?

¿Cuáles son los pros y los contras de un sitio receptivo en lugar de detectar medios y redirigirlos al sitio móvil?

¿Cuál es la diferencia entre una versión móvil de un sitio web y el sitio web receptivo? ¿Cuál es mejor?