html - 媒体查询适用于浏览器调整大小，而不适用于移动设备

Question

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

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

首先，这是我正在使用 atm 的媒体查询 - 它是一个名为 _media.scss 的 SCSS 部分文件中的混合，我将其导入到主 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;
        }
      }
    }

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

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

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

Answer 1

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