引导和/或媒体查询在 Github 页面上不起作用答案

【问题标题】：Bootstrap and/or media queries not working on Github Pages引导和/或媒体查询在 Github 页面上不起作用
【发布时间】：2018-11-24 21:22:59
【问题描述】：

我想使用 GitHub Pages 托管一个网站。我能够上传它，它在计算机上完美运行。但是，当我在手机上打开它时，Bootstrap 和/或媒体查询不起作用，因为该网站看起来像是缩小到适合，而不是采用我编写的响应式布局。

现在我的文件看起来像：

index.html

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/responsive.css">
<!-- JS (end of body) -->
<script src="js/custom.js"></script>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.bxslider.js"></script>

响应式.css

@media only screen and (max-width: 768px){
.header-picture{
    display: none;
}

问题是我手机上的网站是这样的：non-responsive

当它看起来像这样（根据响应者）：responsive

我关注了 Bootstrap / CSS not working on Github Pages 并尝试通过在 github 上添加文件位置来修复它。但是，我得到了相同的结果

index.html

<!-- Meta tag for responsive websites -->
<meta name="viewport" content="width-device-width, initial scale=1, shrink-to-fit=no">
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="https://EmiliaPaz.github.io/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://EmiliaPaz.github.io/css/style.css">
<link rel="stylesheet" type="text/css" href="https://EmiliaPaz.github.io/css/responsive.css">
<!-- JS-->
<script src="https://EmiliaPaz.github.io/js/custom.js"></script>
<script src="https://EmiliaPaz.github.io/js/jquery.js"></script>
<script src="https://EmiliaPaz.github.io/js/bootstrap.min.js"></script>
<script src="https://EmiliaPaz.github.io/js/jquery.bxslider.js"></script>

我发现真正好奇的是，当我将我的网站 URL (https://emiliapaz.github.io/) 放在 responsinator.com 上时，它表明它应该在较小的屏幕上工作，但它不能！

谢谢你的帮助，我真的卡住了

【问题讨论】：

标签： html css bootstrap-4 github-pages

【解决方案1】：

您的 <meta> 标签 (width-device-width) 有错字。

更改自：

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

到

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

【讨论】：

【解决方案2】：

元视口需要适合 safari IOS 上的设备宽度。

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

更多信息参考堆栈问题如下： What is initial scale, user-scalable, minimum-scale, maximum-scale attribute in meta tag?

【讨论】：