媒体查询在浏览器调整大小上工作，而不是在移动设备上

Question

我在 Google 上搜索了我的问题，但找不到合适的解决方案。实际上，我正在构建一个当前使用 HTML 和 CSS 的 eBay 列表模板——我正在使用 SCSS 来生成样式表。我现在正在处理我的模板的菜单方面。

我已经设置了我的媒体查询，以便在宽度小于 690 像素的设备上（我没有使用标准查询，我使用断点来适应我的内容 - 它们也可能会发生变化），菜单按钮变为块元素并显示在列中而不是行中（在桌面上）。

首先，这是我正在使用 atm 的媒体查询 - 它是一个名为 _media.scss 的 SCSS 部分文件中的一个 mixin，我将它导入到主 style.scss 中。

    @mixin bp-large {
      @media only screen and (max-width: 690px){
        @content;
      }
    }

这是使用@import 'media'; 导入到我的style.scss 文件中的

这是我的菜单的 HTML：

          <div class='header'>
            <section>
              <div class='logo'>
                <h2>Company Logo</h2>
              </div>
              <div class='top-menu'>
                <ul>
                  <li><a href='#'>Store Front</a></li>
                  <li><a href='#'>Latest Arrivals</a></li>
                  <li><a href='#'>Featured Picks</a></li>
                  <li><a href='#'>Feedback</a></li>
                  <li><a href='#'>Contact</a></li>
                </ul>
              </div>
            </section>
          </div>

这里是相关的 SCSS：

    section {
      width: 85vw;
      margin: 0 auto;
      .header & {
        @include bp-large {
          width: 60vw;
        }
      }
    }

    .logo {
      @include bp-large {
        text-align: center;
      }
    }

    .top-menu {
      background-color: $primary;
      text-align: center;
      width: 100%;
    }

    .top-menu ul {
      list-style: none;
      display: flex;
      text-align: center;
      flex-direction: row;
      @include bp-large {
        flex-direction: column;
     }
    }

    .top-menu ul li {
      flex-grow: 1;
      display: flex;
      align-items: center;
      background-color: $button-color;
      padding: 15px;
      border-right: 3px solid $accent-color;
      &:last-child {
        border: none;
      }
      &:hover {
        background-color: $button-hover;
        cursor: pointer;
      }
      @include bp-large {
        display: block;
        border-bottom: 3px solid $accent-color;
        border-right: none;
        &:last-child {
          border: none;
        }
      }
    }

我为我的项目@http://dannyxcii.github.io/lst-tmp 设置了一个 GitHub 页面 - 目前该菜单实际上做了在智能手机上查看时应该做的事情（在添加以下 HTML 行之后）：

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

但是 - 菜单位于页面左侧，最初不适合设备宽度 - 通常的“双击居中”让它看起来应该是这样的。关于如何解决这个问题的任何想法？

Answer 1

问题是浏览器使用的像素与硬件像素不同。他们使用所谓的 DIP（密度独立像素或设备独立像素）。 新的移动设备配备全高清屏幕，甚至更多像素的屏幕分辨率。例如，三星 Galaxy s8 的分辨率为 2,960x1,440。由于它的宽度为 14440px，因此像 (max-width:760px) 这样的媒体查询或任何其他媒体查询都不起作用，因为它的最大宽度为 1440px。 但是，为了保持一定程度的一致性，有 DIP，DIP 会将您的 CSS 像素转换为最适合查看您的网站的内容。对于手机，DIP 中的宽度为 320px。 TL;DR：添加“元视口”标签后，您告诉浏览器使用 dips 而不是 CSS 像素。通过将更高分辨率设备中的 2 个或更多像素映射到 1DIP，它将每个移动设备视为 320 像素设备。 Udacity免费提供了一个非常简短而甜蜜的课程，它通过meta viewport tagLink to the course进行。希望这会有所帮助:)