Bootstrap在手機上無法正常工作

Question

我試圖將我的設計作爲手機運行在chrome上的開發人員工具，但引導程序無法正常工作。有人可以告訴我爲什麼Bootstrap不適用於移動設備嗎？

這是我試圖在手機上運行時的圖片。

和這個當我在桌面上運行它工作我不知道爲什麼不在手機上。

這裏是我的媒體查詢。

@media (max-width: 768px) { 
.img-responsive{ 
width: 300px; 
height:50px; 
padding-left:50px; 
} 
} 
@media (max-width: 376px) { 
.img-responsive{ 
width: 220px; 
height:50px; 
padding-left: 20px; 
} 
} 
@media (max-width: 286px) { 
.img-responsive{ 
width: 180px; 
height:50px; 
padding-left: 5px; 
} 
.footer{ 
height: auto; 
} 
h4{ 
padding-top: 50px; 
padding-left: 20px; 
} 
} 

Answer 1

你可能缺少視meta標籤在HTML頭：

視口是用戶網頁的可見區域。使用width=device-width，您需要將寬度設置爲您在移動設備或平板電腦或臺式機中查看的設備寬度。

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

參見此鏈接：Viewport meta tag

What is Viewport?.

Answer 2

您沒有正確使用媒體查詢。使用它以這樣的方式

---

@media only screen and (max-width: 500px) { 
    body { 
     background-color: lightblue; 
    } 
} 

參考更多詳細信息：http://www.w3schools.com/css/css_rwd_mediaqueries.asp