Para poder generar interactivos que se muestren bien en los diferentes dispositivos ajustándose y haciendo los cambios necesarios para su correcta visualización y funcionamiento. Necesitamos conocer las características principales del dispositivo que esta usando el usuario.
Para ello uso un objeto que recoge todas las características y tiene los métodos necesarios para su uso.
var sis = {
ua: navigator.userAgent.toLowerCase(),
cookok: navigator.cookieEnabled,
lan: navigator.language,
conn: navigator.onLine,
tipo: navigator.platform,
tactil: 'ontouchstart' in document.documentElement,
nav: 'chrome',
dis: 'ordenador',
sis: '',
winsize: [window.innerWidth,window.innerHeight],
clisize: [document.documentElement.clientWidth,document.documentElement.clientHeight],
inic: function() {
if(this.ua.indexOf('safari') >= 0) { if(this.ua.indexOf('mac') === -1) { this.nav = 'chrome'; }else{ this.nav = 'safari'; } }
if(this.ua.indexOf('edg') >= 0) { this.nav = 'edge'; }
if(this.ua.indexOf('firefox') >= 0) { this.nav = 'firefox'; }
if(this.ua.indexOf('windows') >= 0) { this.sis = 'windows'; }
if(this.ua.indexOf('android') >= 0) { this.dis = 'movil'; this.sis = 'android'; }
if(this.ua.indexOf('macintosh') >= 0) { if(sis.tactil) { this.dis = 'tablet';}else{ this.dis = "ordenador"; }; this.sis = 'os'; }
if(this.ua.indexOf('iphone') >= 0) { this.dis = 'movil'; this.sis = 'ios'; }
if(this.ua.indexOf('kindle') >= 0) { this.dis = 'ebook'; this.sis = 'kindle'; }
if(this.ua.indexOf('nintendo') >= 0 || this.ua.indexOf('play') >= 0 || this.ua.indexOf('wii') >= 0 ) { this.dis = 'consola'; }
},
get: function(dato) {
switch(dato) {
default: return this[dato]; break;
case "conn": return navigator.onLine; break;
}
}
}