Bootstrap 在桌面上工作但在手机上不工作答案

【问题标题】：Bootstrap working on desktop but not on phoneBootstrap 在桌面上工作但在手机上不工作
【发布时间】：2018-07-18 10:32:58
【问题描述】：

我正在制作我的第一个网站。这是pastebin上的代码：

这是一些绕过错误通知的代码。

<div class="container-fluid" id="intro">

（我很抱歉链接了 pastebin，但它是很多代码。请理解，在这里尝试对其进行格式化太费时，并且 pastebin 无论如何都会突出显示 html 元素）

在我的桌面上，bootstrap 可以完美运行并调整大小。这是一个关于如何正确调整大小的简短视频。

在常规视图模式（视频的第一部分）中，元素正确对齐。当我进入响应式设计模式时，元素也会正确对齐。

但是当我将网站上传到我的服务器并在我的手机（三星 Galaxy S7 Edge）上进行测试时，元素对齐不正确。

安卓火狐：

Android Chrome：

如您所见，元素对齐就好像它们处于手机浏览器桌面视图模式（实际上并非如此）。

我在别人的手机上试过这个，同样的事情发生了。

这是一个引导错误吗？我的代码错了吗？

【问题讨论】：

【解决方案1】：

您应该在代码中包含视口元素，

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

【讨论】：

【解决方案2】：

必须使用 col-lg-# 而不是 sm 或 xs。我猜我手机上的显示实际上与 Mozilla 网络工具的分辨率不同。

【讨论】：