php - remove - strip_tags wordpress

Cómo determinar qué opción de grilla se usa actualmente

Question

Uso Bootstrap 3 para una página web que se crea utilizando PHP y HTML.

Con la cuadrícula de respuesta y las clases en Bootstrap 3 puede asignar múltiples clases a un div para definir diferentes anchuras dependiendo del tamaño de la pantalla actual - exmaple:

<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">...</div>

Esto se refiere al tamaño de la pantalla usando col-lg para dispositivos grandes, col-md para dispositivos medianos, col-sm para dispositivos pequeños y col-xs para dispositivos extra pequeños.
Funciona según lo previsto, pero me pregunto cómo puedo determinar cuál de estas clases utiliza Bootstrap en este momento para poder mostrar la versión de tamaño actual en la pantalla.

¿Hay alguna forma de poder determinar cuál de las opciones / clases col antes mencionadas está actualmente activa usando PHP (o jQuery)? No pude encontrar una solución adecuada para esto yo mismo.

Muchas gracias de antemano, Tim.

Answer 1

Aquí hay una prueba simple que puede intentar mostrar qué clase de bootstrap está usando al redimensionar a un cierto tamaño.

El ancho se toma de la ventana actual, y las condiciones o tamaños de pantalla son de BOOTSTRAP , no confíe en esto ya que esto no es exacto, tal vez más o menos 3px.

Puedes mejorar esto a tu gusto.

$(document).ready(function(){
$(window).on(''resize'',function(){
var winWidth = $(window).width();
if(winWidth < 768 ){
console.log(''Window Width: ''+ winWidth + ''class used: col-xs'');
}else if( winWidth <= 991){
console.log(''Window Width: ''+ winWidth + ''class used: col-sm'');
}else if( winWidth <= 1199){
console.log(''Window Width: ''+ winWidth + ''class used: col-md'');
}else{
console.log(''Window Width: ''+ winWidth + ''class used: col-lg'');
}
});
});

Answer 2

Con este pequeño fragmento, puede ver el tipo de dispositivo actual (Móvil, Tableta, Escritorio, Grande) directamente agregar la parte superior del cuerpo. Que te diviertas.

var refreshDeviceInfo = function () {
var id = ''deviceInfo'',
type = "Mobile",
widthType = ''innerWidth'',
container = document.getElementById(id),
width;
if (!(''innerWidth'' in window )) {
widthType = ''clientWidth'';
window = document.documentElement || document.body;
}
width = window[widthType];
// check, if our info container is already in place,
// if not prepend it to the body
if (!container) {
container = document.createElement(''div'');
container.setAttribute("id", id);
container.setAttribute("style", "padding:20px; text-align:center; background:#eee");
document.body.insertBefore(container, document.body.firstChild);
}
if (width >= 1200) {
type = "Large";
}
else if (width >= 992) {
type = "Desktop";
}
else if (width >= 768) {
type = "Tablet";
}
container.innerHTML = type;
};
// refresh on resize
if ( window.addEventListener ) {
window.addEventListener( "resize", refreshDeviceInfo, false );
} else if ( window.attachEvent ) {
window.attachEvent( "onresize", refreshDeviceInfo );
} else {
window["onresize"] = refreshDeviceInfo;
}
// initial refresh
refreshDeviceInfo();

Answer 3

La mejor manera de hacerlo, e incluso sin preocuparse si bootstrap puede cambiar el ancho del dispositivo en el futuro, es agregando 4 divs a su cuerpo y verificando cuál es visible. Esto funciona en Bootstrap 3 y 4.

Su HTML se vería así (agregue esto en algún lugar en el cuerpo de su documento):

<div class=''device-check visible-xs'' data-device=''xs''></div>
<div class=''device-check visible-sm'' data-device=''sm''></div>
<div class=''device-check visible-md'' data-device=''md''></div>
<div class=''device-check visible-lg'' data-device=''lg''></div>

a continuación, puede encontrar la opción de cuadrícula actual con:

function get_current_grid_option(){
return $(''.device-check:visible'').attr(''data-device'')
}

esto devolverá xs , sm , md o lg

Answer 4

Modificó la respuesta de SunnyRed.

Mostrar el diseño actual de Bootstrap 3

• No confía en jQuery, como la respuesta aceptada.
• Muestra la información de diseño siempre en la esquina derecha / inferior de la ventana, encima de otro contenido.
• No modifica la página en sí.
• Espera a que el documento esté listo antes de la primera ejecución, por lo tanto, entrega el resultado correcto desde el principio.

Agregue esto antes de su etiqueta de cuerpo :

 <script>
function refreshDeviceInfo() {
var id = ''deviceInfo'',
type = "Mobile (xs)",
widthType = ''innerWidth'',
container = document.getElementById(id),
width;
if (!(''innerWidth'' in window )) {
widthType = ''clientWidth'';
window = document.documentElement || document.body;
}
width = window[widthType];
if (!container) {
container = document.createElement(''div'');
container.setAttribute("id", id);
container.setAttribute("style", "position:fixed; right:0px; bottom: 0px; padding:10px; z-index:9999;background:rgba(0,255,0,0.6)");
document.body.insertBefore(container, document.body.firstChild);
}
if (width >= 1200) {
type = "Large Desktop (lg)";
} else if (width >= 992) {
type = "Medium Desktop (md)";
} else if (width >= 768) {
type = "Tablet (sm)";
}
container.innerHTML = type;
};
// refresh on resize
if ( window.addEventListener ) {
window.addEventListener( "resize", refreshDeviceInfo, false );
} else if ( window.attachEvent ) {
window.attachEvent( "onresize", refreshDeviceInfo );
} else {
window["onresize"] = refreshDeviceInfo;
}
document.addEventListener("DOMContentLoaded", function(event) {
refreshDeviceInfo();
});
</script>

Answer 5

Extracto del documento : http://getbootstrap.com/css/#grid

Ocasionalmente ampliamos estas consultas de medios para incluir un ancho máximo para limitar CSS a un conjunto de dispositivos más estrecho.

Dupdo

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

Opciones de cuadrícula

Vea cómo funcionan los aspectos del sistema de cuadrícula Bootstrap en varios dispositivos con una tabla práctica.

• Dispositivos extra pequeños Teléfonos (<768px)
• Dispositivos pequeños Tablets (≥768px)
• Escritorios de dispositivos medianos (≥992px)
• Equipos grandes de sobremesa (≥1200px)