Saltar al contenido

Cómo detectar SÓLO con CSS pantallas móviles

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.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *