CSS移动设备调整大小的浏览器与移动设备不同

Question

这是我第一次在Bootstrap CSS中遇到此问题。

我在浏览器上有一个外观不错的设计，但是当我在实际的移动设备上显示同一页面时，css我完全错了，我不知道为什么。

我已经测试了Stack Overflow的多个答案，但不能解决问题。我多次尝试清空移动设备上的缓存，尝试了隐身模式，但仍然看到错误的CSS。我还测试了将标题对齐到居中文本，在浏览器（移动宽度）上显示正确，但在移动设备（iPhone 6 S Plus）上显示正确，在移动设备上显示为左侧。

在装有Chrome和Safari的移动设备上，结果也是错误的。

这是header.php中的meta标签：

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

这是浏览器和移动设备中的外观：

浏览器（Chrome）： 浏览器上的CSS调整为移动宽度

移动设备CSS： 在手机上的外观