Usando CSS Media Queries , podemos saber fácilmente qué usuario está viendo actualmente nuestro sitio web en qué dispositivo ( usando min-width y max-width ). Solo se limita al estilo de las páginas web, pero podemos controlar la funcionalidad del sitio web de acuerdo con el dispositivo del usuario utilizando la propiedad userAgent del navegador en JavaScript.
Podemos obtener información sobre el dispositivo del usuario. Devuelve una string que contiene el nombre del navegador del usuario, la versión, el sistema operativo, etc.
Sintaxis:
navigator.userAgent
Tipo de retorno: Devuelve la siguiente string para un escritorio de Windows:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.85 Safari/537.36
Ejemplo: al usar esta propiedad, podemos predecir fácilmente que se abre en una computadora de escritorio o en un dispositivo móvil, como se muestra en el siguiente código.
HTML
<html>
<body>
<script>
/* Storing user's device details in a variable*/
let details = navigator.userAgent;
/* Creating a regular expression
containing some mobile devices keywords
to search it in details string*/
let regexp = /android|iphone|kindle|ipad/i;
/* Using test() method to search regexp in details
it returns boolean value*/
let isMobileDevice = regexp.test(details);
if (isMobileDevice) {
document.write("You are using a Mobile Device");
} else {
document.write("You are using Desktop");
}
</script>
</body>
</html>
Salida: La siguiente será la salida para el navegador de escritorio:
You are using Desktop
Publicación traducida automáticamente
Artículo escrito por durgeshpushpakar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA