何時使用引導程序col-xs- *？

我正在開發一個響應式網站。我確信大多數手機都會使用col-xs-*尺寸，但事實證明，大多數手機都使用col-sm-*。我在三個android模擬器下運行我的網站。尺寸分別爲：320x240,854x480和1280x720。我想出了簡單的測試是把這個div：何時使用引導程序col-xs- *？

<div class="col-sm-6 hidden-lg hidden-md hidden-xs" style="background-color: black; height: 200px"></div>

某處的網頁。正如你可以看到它應該只顯示sm設備分辨率，事實上它是，但我不明白爲什麼。每個仿真器的寬度爲< 768px，所以我認爲它不會顯示。

問題是：爲什麼？

編輯

越來越多的質疑:)。我發現這個網站：https://getbootstrap.com/examples/grid/其中指出The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops).這讓我更加困惑。哪款手機的尺寸是xs？

編輯

當我把這個代碼在我的網頁的底部：

<script type="text/javascript"> 
    (function() { 
     alert(window.innerWidth); 
    })(); 
</script>

我得到的仿真器中的每一個值980。如果我嘗試使用開發人員工具（有切換到移動視圖的選項）在Chrome（桌面）下測試我的網頁，情況也是如此。

來源

2016-08-24 Marek M.

好的，所以爲了子孫後代 - 我在這裏找到了答案：Why is my Android device-width 980px?這讓我能夠正確地工作。如果該問題被刪除或無效 - 請將此添加到您的<head>：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

來源

2016-08-24 18:16:44

何時使用引導程序col-xs- *？

回答

相關問題