Quiero mostrar un texto a los usuarios si están en un dispositivo móvil y la orientación es vertical.
Para detectar dispositivos móviles, estoy usando este script:
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){ document.write("mobile"); }else{ document.write("not mobile"); }y para el modo retrato, estoy usando este CSS:
@media (orientation: portrait) { .land-msg {display: block;} }Pero no puedo combinar ambos para que funcionen entre sí.
¿Hay alguna forma de verificar tanto el dispositivo móvil como la orientación en un solo código?
El tamaño de la pantalla de medios no funcionará porque no quiero que se muestre en el cambio de tamaño del navegador de escritorio.
Cualquier ayuda apreciada.
He usado el siguiente código para que funcione:
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){ if(window.innerHeight > window.innerWidth){ jQuery(".land-msg").css("display", "block"); } }else{}Gracias.
Puede usar matchMedia para detectar la orientación (ancho mínimo/máximo, etc.)
const isMobile = (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) function matchMediaHandler(query) { if (query.matches) { // If media query matches (portrait) document.body.style.backgroundColor = "orange" document.body.innerText = isMobile ? 'Mobile Portrait' : 'Desktop Portrait' } else { document.body.style.backgroundColor = "yellowgreen" document.body.innerText = isMobile ? 'Mobile Landscape' : 'Desktop Landscape' } } // orientation query const orientation = matchMedia("(orientation: portrait)") // add listener orientation.addListener(matchMediaHandler) // trigger on load matchMediaHandler(orientation)Hay formas de CSS puro para detectar dispositivos móviles de una manera que es mejor que el olfateo de userAvent. Para decirlo de otra manera: nunca hagas un sniffing de userAgent. Te prometo que lo estás haciendo mal.
/* smartphones, touchscreens */ @media (hover: none) and (pointer: coarse) and (orientation: portrait) { /* ... */ }Partes de esto fueron tomadas de aquí: https://ferie.medium.com/detect-a-touch-device-with-only-css-9f8e30fa1134