Bootstrap无法在移动设备上运行

Question

我试图将我的设计作为移动设备运行到chrome上的开发人员工具，但是引导程序无效。有人能告诉我为什么引导程序无法在移动设备上运行吗？

这是我尝试在手机上运行时的图片。

这当我在桌面上运行时，我不知道为什么不在移动设备上。

这是我的媒体查询。

 @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

你可能错过了html head中的 viewport元标记：

视口是用户在网页上的可见区域。使用width=device-width，您需要将宽度设置为您正在查看的设备宽度，如移动设备，平板电脑或平板电脑。

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

请参阅此链接： Viewport meta tag

<强> What is Viewport?.