0

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

Israel David Villarroel Moreno
  • 97
  • 11
  • 1
    Los 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?](https://es.stackoverflow.com/q/50786/29967). O también [¿Qué significa la arroba (@) en CSS?](https://es.stackoverflow.com/q/17860/29967). O bien [¿Cómo detectar si el dispositivo es iPhone con CSS?](https://es.stackoverflow.com/q/50334/29967) – A. Cedano May 28 '18 at 20:10
  • 1
    Desde el html puedes definir viewPorts y según esos viewPorts definirle un css u otro a la página: [w3school](https://www.w3schools.com/css/css_rwd_viewport.asp) – enrique manzano gil May 29 '18 at 09:26
  • Deberías empezar a usar el ["diseño móvil primero"](https://en.wikipedia.org/wiki/Responsive_web_design#Mobile_first,_unobtrusive_JavaScript,_and_progressive_enhancement). 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").. – OscarGarcia Dec 24 '20 at 08:47

2 Answers2

0

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;
    }
}
Armando Mariscal
  • 910
  • 6
  • 15
  • 1
    Hoy 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. – Jakala May 29 '18 at 07:48
0

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;
Kleith
  • 3,773
  • 2
  • 13
  • 27