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 头部缺少 viewport 元标记：

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

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

参考此链接： Viewport meta tag

What is Viewport?.

Answer 2

值得一提...

还必须在任何“父”页面（如果在 iframe 中运行）和母版页上设置视口。

Answer 3

设置视口以使您的网站在所有设备上看起来都不错：

https://www.w3schools.com/tags/tag_meta.asp