Bootstrap 无法在移动设备上运行

我尝试将我的设计作为移动设备运行到 chrome 上的开发人员工具中，但引导程序无法正常工作。有人可以告诉我为什么引导程序无法在移动设备上运行吗？

here is the picture when i tried to run on mobile.

当我在桌面上运行时它可以工作，我不知道为什么不能在移动设备上运行。

这是我的媒体询问。

 @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;
 }
 }

你可能错过了视口元标记在 html 头部：

视口是用户可见的网页区域. Using width=device-width您需要将宽度设置为您正在查看的设备宽度，例如手机、平板电脑或台式机。

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

请参考此链接： 视口元标记 http://webdesign.tutsplus.com/tutorials/quick-tip-dont-forget-the-viewport-meta-tag--webdesign-5972

什么是视口？ http://www.w3schools.com/css/css_rwd_viewport.asp