Как узнать, в каком состоянии/формате находится Twitter-бутстрап?

Question

Twitter Bootstrap использует 4 различных формата экрана в общем, будучи: XS, SM, MD и LG. При разработке и тестировании я часто задаюсь вопросом, какой из них используется в этот момент.

Есть ли способ всегда знать, какой формат обрабатывается без использования какого-либо инструмента для разработчиков?

Answer 1

Я написал короткий и простой код div с классом «debug».

С помощью простого HTML и CSS вы можете отображать div с текущим размером экрана на дисплее. Каждый разработчик должен иметь возможность написать это. Но все же я думал, что поделюсь этим, может быть, ты об этом не думал.

HTML

<div class="debug hidden-xs hidden-sm hidden-md">Size: LG - Large</div> 
<div class="debug hidden-xs hidden-sm hidden-lg">Size: MD - Medium</div> 
<div class="debug hidden-xs hidden-md hidden-lg">Size: SM - Small</div> 
<div class="debug hidden-sm hidden-md hidden-lg">Size: XS - Extra small</div> 

CSS

.debug{ width: 100%; position: fixed; bottom: 0; background: #ed2901; color: #FFF; text-align: center; line-height: 20px; } 

Answer 2

Мой небольшое улучшение к основному ответу. Добавьте этот фрагмент HTML в любом месте вашей страницы.

<div style="width:100%;position:fixed;bottom:0px;background: rgba(200,0,0,0.7); 
color:#fff; text-align:center;z-index:1000"> 
<span class="debug hidden-xs hidden-sm hidden-md">Size: XS SM MD <b>LG</b></span> 
<span class="debug hidden-xs hidden-sm hidden-lg">Size: XS SM <b>MD</b> LG</span> 
<span class="debug hidden-xs hidden-md hidden-lg">Size: XS <b>SM</b> MD LG</span> 
<span class="debug hidden-sm hidden-md hidden-lg">Size: <b>XS</b> SM MD LG</span> 
| ViewportWidth: <span id='viewportwidth'></span> 
</div> 

<script> 
window.addEventListener('resize', function(event){ updateWidthInfo(); }); 

document.addEventListener('DOMContentLoaded', function(event){ updateWidthInfo(); }); 

function updateWidthInfo() { 
    document.getElementById('viewportwidth').innerHTML = getViewportWidth(); 
    function getViewportWidth(w) { 
     w = w || window; 
     if (w.innerWidth != null) return w.innerWidth; 
     var d = w.document; 
     if (document.compatMode == "CSS1Compat") return d.documentElement.clientWidth; 
     else return d.body.clientWidth; 
    } 
} 
</script> 

Это также показывает текущую ширину.