Te sugerimos que revises esta solución en un ambiente controlado antes de pasarlo a producción, saludos.
Solución:
La regla @media se usa para definir diferentes reglas de estilo para diferentes tipos/dispositivos de medios.
Si no funciona, revisa tu código. es posible que haya cometido un error tipográfico en alguna parte.
Ejemplo:
@media only screen and (max-device-width : 640px)
/* Styles */
@media only screen and (max-device-width: 768px)
/* Styles */
Publicación anterior: ¿Cómo codificar consultas de medios CSS dirigidas a TODOS los dispositivos móviles y tabletas?
Escuelas W3: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Todos los dispositivos móviles y de pantalla táctil (incluyendo tabletas, teléfonos inteligentes) se pueden detectar con css con la siguiente regla @media.
@media only screen and (hover: none) and (pointer: coarse)
/* Regular CSS rules here*/
La consulta de medios CSS funciona, pero ¿qué pasa con los iPads con pantallas grandes? Puedes hacer lo siguiente con javascript:
if (window.orientation !== undefined)
document.body.classList.add("mobile");
Puntuaciones y reseñas
Te invitamos a avalar nuestra labor exponiendo un comentario o dejando una valoración te lo agradecemos.