时间戳

首页 > 解决方案 > Bootstrap CSS 仅适用于 PC 网络浏览器，不适用于移动浏览器

javascript - Bootstrap CSS 仅适用于 PC 网络浏览器，不适用于移动浏览器

问题描述

我是引导框架的新手。我的网站在浏览器中看起来像这样...... 在此处输入图像描述

但这在移动浏览器上...

在此处输入图像描述

我正在阅读的所有堆栈帖子都说问题出在视口元标记上，但我相信我是正确的，下面是我的代码的标题。

<head>
    <title> Matt & El </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

还有什么想法吗？如果需要，我可以提供完整的源代码。作为参考，我的浏览器是 google chrome，我已经尝试过 Safari 和 Bing 用于移动浏览器。谢谢你。

标签： javascripthtmlcssbootstrap-4

解决方案

您正在从不安全的位置 ( http) 而不是https. 现代浏览器不允许在页面本身存在时从不安全的来源加载内容https（您的移动屏幕截图中的锁定符号表示）。

所以替换http为https（maxcdn 将请求重定向到https）：

<head>
    <title> Matt & El </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

推荐阅读