html - 媒体查询不适用于托管在 Github Pages 上的站点

Question

我正在构建一个新的单页网站，但出于某种原因我的媒体查询似乎不起作用？如果我调整浏览器大小，它工作正常，但如果我在移动设备上访问 GitHub 页面上的托管站点，我仍然可以使用桌面版本吗？网站托管于此:https://russdog.github.io/mellish/

有趣的是，我最近提交的一个元素也遇到了同样的问题。对浏览器大小调整完全响应，但在移动设备上访问和托管在 GitHub 页面上时从不响应:https://russdog.github.io/ColmarAcademy/

谁能帮我查明原因？

HTML 在这里:

 <!-- Mobile Version -->

    <div class="mobiMain">
      <div class="mobiLogo">
        <img src="resources/images/logo_small.png">
      </div>
      <div class="mobiDetails">
        <!-- <p id="mobiContact">Contact Us</p> -->
        <p>Andrew Mellish (+27) 82 509 0224 | info@mellishvineyards.com</p>
        <p>Wine of Origin Durbanville, Cape Town.</p>
        <p>Welbeloond Farm, Cnr of Potsdam Rd. & Malibongwe Dr. Cape Farms, Cape Town.</p>
      </div>
      <div class="mobiCopyright">© Mellish Family Vineyards</div>
    </div>

CSS is here:

/* MOBILE VERSION */

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

  .mobiMain {
    display: flex;
    flex-flow: column nowrap;
  }

  .mobiLogo {
    display: flex;
    justify-content: center;
    flex-flow: row nowrap;
    width: 100%;
  }

  .mobiLogo img {
    width: 90%;
    height: 90%;
  }

  .mobiDetails {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    padding-bottom: 2rem;
  }

  .mobiDetails p {
      height: auto;
      text-align: center;
      line-height: 1.3rem;
      font-size: 1.2rem;
    }

    #mobiContact {
      font-size: 3rem;
    }

    .mobiCopyright {
      display: flex;
      align-items: center;
      flex-direction: column;
      font-size: 1rem;
    }
  }

Answer 1

尝试在你的 html head 中添加这个标签

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

关于这个标签做什么的更多文档

https://www.w3schools.com/css/css_rwd_viewport.asp