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头中添加此标签

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

有关此标记作用的更多文档

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

媒体查询不适用于Github Pages上托管的网站

1 个答案: