Bootstrap不会在我的手机上正确调整大小,但会在桌面上调整大小

时间:2018-02-12 07:33:27

标签: android html css twitter-bootstrap bootstrap-4

这是我第一个合法的网站,我无法完成这项简单的工作。这是关于pastebin的代码:

https://pastebin.com/CEU74Fx6

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

error running tasks: deadline exceeded executing task IAMRole/nodes.cs.cluster.k8s.local. Example error: error creating IAMRole: InvalidClientTokenId: The security token included in the request is invalid
        status code: 403, request id: 30fe2a97-0fc4-11e8-8c48-0f8441e73bc3

(我很抱歉链接了pastebin,但是代码很多。请理解在这里尝试格式化是耗时的,而且无论如何都要重复使用HTML元素。

在我的桌面引导程序上运行完美,并按原样调整大小。这是一个关于它如何正确调整大小的简短视频。

https://streamable.com/pynkm

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

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

Android Firefox:

https://i.imgur.com/ccjgYSR.png

Android Chrome:

https://i.imgur.com/gjCIW3t.png

正如您所看到的,元素对齐就像它们处于手机浏览器桌面视图模式一样(它不在桌面视图模式下)。

我在其他人的手机上试过这个并且发生了同样的事情。

这是一个bootstrap错误吗?我的代码错了吗?

1 个答案:

答案 0 :(得分:0)

替换此元标记:

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

这一个:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

这应该告诉你的手机不要缩小。

我在那里看到的另一个错误:您似乎在使用没有容器的Bootstrap行。引导行总是需要.container.container-fluid才能正常工作。