check - javascript device type

¿Cómo puedo detectar en qué dispositivo estás usando API Twitter Bootstrap?

Question

Acabo de empezar a jugar con Twitter Bootstrap API para un proyecto que tengo por delante. El navegador principal contiene 3 elementos principales:

• sitio nav
• enlaces sociales nav
• buscar el formulario del sitio

Estoy usando el complemento de colapso para contraer el formulario de navegación y búsqueda del sitio cuando visualizo el sitio en dispositivos móviles. La vista móvil tiene 2 botones que, al hacer clic, activan / desactivan el formulario de búsqueda o el navegador principal.

Sin embargo, si desactivo el formulario de búsqueda y luego cambio el tamaño de mi navegador a la vista de escritorio, ¿el formulario de búsqueda todavía está oculto en esta vista?

He leído sobre el uso de clases como visible-mobile, etc. pero parecen chocar con el plugin de colapso. También me di cuenta de que probablemente podría escribir mis propios hacks de CSS para arreglar esto, pero pensé en preguntar si había una solución más fácil.

Bootstrap tiene eventos para mostrar, mostrar, ocultar y ocultar así que pensé que tal vez podría escribir algunos JS personalizados que mostrarían u ocultarían estos elementos en cada vista particular del dispositivo. Sin embargo, no sabía cómo detectar qué dispositivo estoy usando en ese momento.

¿Pensamientos?

Gracias por adelantado

Answer 1

Bootstrap 4

(actualmente para Beta y con suerte para la versión de lanzamiento también en el futuro)

Esta es una versión modificada basada en las soluciones rmobis (Bootstrap 2/3) y Farside (Bootstrap 4)

/*
* Detect and return the current active responsive breakpoint in Bootstrap 4
*
* @returns {string}
* xs: Extra small (< 576px)
* sm: Small (576px ≥ X < 768px)
* md: Medium (768px ≥ X < 992px)
* lg: Large (992px ≥ X < 1200px)
* xl: Extra large (≥ 1200 px)
*/
function getResponsiveBreakpoint() {
var envs = ["sm", "md", "lg", "xl"];
var env = "";
var $el = $("<div>");
$el.appendTo($("body"));
$el.addClass("d-block");
for (var i = envs.length - 1; i >= 0; i--) {
env = envs[i];
$el.addClass("d-" + env + "-none");
if ($el.is(":hidden")) {
$el.remove();
return env;
}
}
$el.remove();
return "xs"; //extra small
}

Answer 2

Basándose en las respuestas de @Raphael_ y @ user568109, en Bootstrap 3, Responsive ahora está integrado.

Para detectar el tipo de dispositivo en Javascript, crea un objeto que solo se muestre en tu dispositivo requerido usando las clases Responsive de Bootstrap. Luego verifique su :hidden propiedad :hidden .

Ejemplo:

1. Cree un panel <div> sin contenido que se muestre en un dispositivo más grande que un dispositivo eXtra Small (gracias a @Mario Awad):

   <div id="desktopTest" class="hidden-xs"></div>

   o , para excluir dispositivos específicos:

   <div id="desktopTest" class="visible-sm visible-md visible-lg"></div>

2. Compruebe el valor de #desktopTest :

   if ($(''#desktopTest'').is('':hidden'')) {
   // device is == eXtra Small
   } else {
   // device is >= SMaller
   }

Answer 3

Caso de nicho, pero puedes aplicar @ Kar.ma''s a Mediawiki con Chameleon (bootstrap skin) instalado. Pase los "resultados" del DIV como un argumento de plantilla, luego pruebe contra eso dentro de la plantilla.

Answer 4

Combinando las respuestas de arriba, esta funciona para mí:

function findBootstrapDeviceSize() {
var dsize = [''lg'', ''md'', ''sm'', ''xs''];
for (var i = dsize.length - 1; i >= 0; i--) {
// Need to add   for Chrome. Works fine in Firefox/Safari/Opera without it.
// Chrome seem to have an issue with empty div''s
$el = $(''<div id="sizeTest" class="hidden-''+dsize[i]+''">&nbsp;</div>'');
$el.appendTo($(''body''));
if ($el.is('':hidden'')) {
$el.remove();
return dsize[i];
}
}
return ''unknown'';
}

Answer 5

Mi respuesta es utilizar un mecanismo similar al presentado por @Raphael_, sin embargo, puedes hacer un poco más con él. Consulte esta respuesta para obtener más detalles y el repositorio github del proyecto para obtener la versión más actualizada.

Ejemplo de detección de punto de interrupción:

if ( viewport.is(''xs'') ) {
// do stuff in the lowest resolution
}

Ejecutar código en el tamaño de la ventana (sin que ocurra varias veces en un lapso de milisegundos):

$(window).bind(''resize'', function() {
viewport.changed(function() {
// do some other stuff!
})
});

Answer 6

Originalmente publiqué una respuesta aquí , la solución para Bootstrap v.4.x.

Detección del punto de interrupción JS para Twitter Bootstrap 4.1.x

Bootstrap v.4.0.0 (y la última versión de Bootstrap 4.1.x ) introdujeron las opciones de grilla actualizadas, por lo que es posible que el antiguo concepto de detección no se aplique directamente (consulte las instrucciones de migración ):

• Se agregó un nuevo nivel de cuadrícula sm por debajo de 768px para obtener un control más detallado. Ahora tenemos xs , sm , md , lg y xl ;
• xs clases de cuadrícula xs se han modificado para no requerir el infijo.

Escribí la pequeña función de utilidad que respeta un nombre de clase de grilla actualizado y un nuevo nivel de grilla:

/**
* Detect the current active responsive breakpoint in Bootstrap
* @returns {string}
* @author farside {@link https://.com/users/4354249/farside}
*/
function getResponsiveBreakpoint() {
var envs = {xs:"d-none", sm:"d-sm-none", md:"d-md-none", lg:"d-lg-none", xl:"d-xl-none"};
var env = "";
var $el = $("<div>");
$el.appendTo($("body"));
for (var i = Object.keys(envs).length - 1; i >= 0; i--) {
env = Object.keys(envs)[i];
$el.addClass(envs[env]);
if ($el.is(":hidden")) {
break; // env detected
}
}
$el.remove();
return env;
};

Detección de punto de interrupción JS para Bootstrap v4-beta

La última versión de Bootstrap v4-alpha y Bootstrap v4-beta tuvo un enfoque diferente en los puntos de interrupción de la grilla, así que esta es la forma heredada de lograr lo mismo:

/**
* Detect and return the current active responsive breakpoint in Bootstrap
* @returns {string}
* @author farside {@link https://.com/users/4354249/farside}
*/
function getResponsiveBreakpoint() {
var envs = ["xs", "sm", "md", "lg"];
var env = "";
var $el = $("<div>");
$el.appendTo($("body"));
for (var i = envs.length - 1; i >= 0; i--) {
env = envs[i];
$el.addClass("d-" + env + "-none");;
if ($el.is(":hidden")) {
break; // env detected
}
}
$el.remove();
return env;
}

Creo que sería útil, ya que es fácil de integrar a cualquier proyecto. Utiliza clases nativas de visualización responsiva del propio Bootstrap.

Answer 7

Según la respuesta de @Alastair McCormack, te sugiero que uses este código

<div class="visible-xs hidden-sm hidden-md hidden-lg">xs</div>
<div class="hidden-xs visible-sm hidden-md hidden-lg">sm</div>
<div class="hidden-xs hidden-sm visible-md hidden-lg">md</div>
<div class="hidden-xs hidden-sm hidden-md visible-lg">lg</div>

Solo agréguela al final de su contenedor div, obtendrá una información dinámica simple sobre la vista actual.

Answer 8

Si desea saber en qué entorno se encuentra, intente utilizar las propias clases de CSS de Bootstrap. Cree un elemento, agréguelo a la página, aplique sus clases de ayuda y compruebe si está oculto para determinar si ese es el entorno actual. La siguiente función usa jQuery para hacer eso:

Bootstrap 3

function findBootstrapEnvironment() {
var envs = [''xs'', ''sm'', ''md'', ''lg''];
var $el = $(''<div>'');
$el.appendTo($(''body''));
for (var i = envs.length - 1; i >= 0; i--) {
var env = envs[i];
$el.addClass(''hidden-''+env);
if ($el.is('':hidden'')) {
$el.remove();
return env;
}
}
}

Bootstrap 2

function findBootstrapEnvironment() {
var envs = [''phone'', ''tablet'', ''desktop''];
var $el = $(''<div>'');
$el.appendTo($(''body''));
for (var i = envs.length - 1; i >= 0; i--) {
var env = envs[i];
$el.addClass(''hidden-''+env);
if ($el.is('':hidden'')) {
$el.remove();
return env;
}
}
}