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头中缺少视口元标记:

视口是用户在网页上的可见区域.使用width=device-width您需要将宽度设置为您在移动设备,平板电脑或台式机中查看的设备宽度.

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

请参阅此链接: Viewport元标记

什么是Viewport？