Esta pregunta se ha debatido varias veces, así que permítanme exponer el problema y ver si puedo obtener una respuesta clara y moderna.
Tengo un componente de carga de archivos, en una página, que obtendrá una vista previa del archivo antes de enviarlo al servidor. Admite múltiples tipos de archivos, incluidos múltiples formatos de imagen y pdf. Tengo vistas 'alternativas' para ciertos escenarios, como que los archivos 'tif' solo se pueden mostrar de forma nativa en Safari.
Mi problema es incrustar un archivo PDF. Tengo esto funcionando, no hay problema. Excepto en el móvil. Los navegadores móviles no admiten la incrustación de archivos PDF.
Así que aquí está el problema central. Puedo mostrar texto alternativo, con un enlace de descarga. Pero solo quiero hacer esto en navegadores móviles. No puedo usar consultas de medios aquí, ya que esto no es realmente una cuestión de tamaño de pantalla (y mi audiencia principal usa pantallas de escritorio pequeñas y antiguas en escenarios de clínicas, que son aproximadamente del tamaño de una tableta en modo horizontal).
Podría usar un enfoque de análisis de UserAgent, pero estos cambian y el soporte del navegador está cambiando.
Luego está la detección de características, pero ¿qué funciona? Detectar soporte táctil puede ser problemático.
Entonces, ¿cuál es el mejor enfoque para este escenario?
El método más rápido es usar JavaScript y detectar qué tamaño es la pantalla (px).
podrías hacer algo como Cómo detectar que el dispositivo es un Android
var el_up = document.getElementById("GFG_UP"); var el_down = document.getElementById("GFG_DOWN"); el_up.innerHTML = "Click on the button to detect if" + " the device is android phone."; function GFG_Fun() { var res = "Device is not Android Phone"; var userAgent = navigator.userAgent.toLowerCase(); var Android = userAgent.indexOf("android") > -1; if(Android) { res = "Device is Android Phone"; } el_down.innerHTML = res; } p#GFG_DOWN { color: green; font-size: 24px; font-weight: bold; } p#GFG_UP { font-size: 19px; font-weight: bold; } body { text-align: center; } h1 { color: green; } <body> <h1>GeeksForGeeks</h1> <p id = "GFG_UP"></p> <button onclick = "GFG_Fun()">click here </button> <p id = "GFG_DOWN"></p> </body>Aun así, no es 100% posible detectar si el usuario usa un teléfono Android: D