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

原文由 nethken 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可能缺少 html 头部中的 视口元标记：

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

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

请参阅此链接： 视口元标记

什么是视口？

原文由 Pbk1303 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

原文由 user17900244 发布，翻译遵循 CC BY-SA 4.0 许可协议