Question

我想使用 GitHub页面来托管网站。我能够上传它，它在计算机上完美运行。但是，当我在手机上打开它时，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>

responsive.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>

我觉得很奇怪的是，当我将我的网站网址（https://emiliapaz.github.io/）放在responsinator.com上时，它显示它应该在较小的屏幕上工作，但它没有！

感谢您的帮助，我真的被困了

Answer 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">

Answer 2

Meta视口需要在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?

无法在Github Pages上运行的引导和/或媒体查询

2 个答案: