Me preguntaba si con css o javascript podia detectar si mi usuario usaba un celular o pc es para alterar el css ya que como hay eventos que no funcionan en celular queria que el diseño empezara distinto se que con los media queries se puede detectar el width pero me refiero a detectar si es un celular o pc
-
1Los media queries sirven precisamente para eso, para detectar el tipo de dispositivo que accede a la web y en base a eso configurar el tamaño de los elementos de la misma... no hay nada suplementario a hacer. Puedes ver la pregunta ¿Qué son los media queries, para qué sirven, cómo se agrupan y cómo implementarlos?. O también ¿Qué significa la arroba (@) en CSS?. O bien ¿Cómo detectar si el dispositivo es iPhone con CSS?– A. CedanoCommented el 28 may. 2018 a las 20:10
-
1Desde el html puedes definir viewPorts y según esos viewPorts definirle un css u otro a la página: w3school– enrique manzano gilCommented el 29 may. 2018 a las 9:26
-
Deberías empezar a usar el "diseño móvil primero". Debes pensar en que toda la web funcione, por ejemplo, sin necesidad de eventos de pasar el ratón por encima. A partir de ahí, puedes agregar funcionalidad o facilidades para equipos de escritorio, pero hoy en día se considera una mala práctica diseñar enfocado al equipo de escritorio y luego agregar soporte para que funcione en dispositivos de pantalla táctil (prefiero usar ese término en vez de "dispositivos móviles")..– OscarGarciaCommented el 24 dic. 2020 a las 8:47
Añade un comentario
|
3 respuestas
En javascript puedes usar el navigator.
function esMobil(){
return navigator.userAgent.match(/Android/i) ||
navigator.userAgent.match(/iPad/i) ||
navigator.userAgent.match(/webOs/i) ||
navigator.userAgent.match(/iPod/i) ||
navigator.userAgent.match(/iPhone/i) ||
navigator.userAgent.match(/BlackBerry/i) ||
navigator.userAgent.match(/Windows Phone/i) ||
}
Con esta función si el navegador concuerda con alguno de esos nombres sabrás que está desde un dispositivo móvil
Con CSS puedes hacer uso de Media Query y basada en las dimensiones de la pantalla realizar los ajustes necesarios.
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
-
1Hoy en dia existen moviles con resoluciones muy altas (les hay de 1920 x 1080), por lo que ese metodo como tal no es aplicable si lo que queremos es detectar el tipo de dispositivo que llama a nuestra aplicacion. Bootstrap3 y 4 se basan en ese principio pero no detectan moviles. Lo suyo de momento seria analizar cabeceras de dispositivo, o utilizar javascript. Hay librerias para ello en varios lenguajes.– JakalaCommented el 29 may. 2018 a las 7:48
Si, desde javascript.
// Opera 8.0+
var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
// Firefox 1.0+
var isFirefox = typeof InstallTrigger !== 'undefined';
// Safari 3.0+ "[object HTMLElementConstructor]"
var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && safari.pushNotification));
// Internet Explorer 6-11
var isIE = /*@cc_on!@*/false || !!document.documentMode;
// Edge 20+
var isEdge = !isIE && !!window.StyleMedia;
// Chrome 1+
var isChrome = !!window.chrome && !!window.chrome.webstore;