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

Question

我已经搜索了我的问题，但找不到合适的解决方案。实际上，我正在使用HTML和CSS构建一个eBay列表模板 - 我正在使用SCSS生成样式表。我目前正在研究模板的菜单方面。

我已经设置了媒体查询，以便在宽度小于690px的设备上（我不使用标准查询，我正在使用断点来适合我的内容 - 它们也需要更改），菜单按钮更改为块元素并在列中显示与行（在桌面上）相对。

首先，这是我正在与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;
        }
      }
    }

我有一个为我的项目设置的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（密度独立像素或设备独立像素）。新的移动设备随屏幕完整的高清或屏幕分辨率中的更多像素附带。示例三星Galaxy S8的分辨率为2,960x1,440。由于它的宽度为14440px，因此（最大宽度：760px）或任何其他媒体查询等媒体查询不起作用，因为最大宽度为1440px。但是，为了保持一定程度的一致性，DIPS将您的CSS像素转换为最适合查看网站的东西。对于手机，下垂的宽度为320px。TL; dr：添加"元视口"标签后，您告诉浏览器使用DIPS代替CSS像素。它通过将高分辨率设备中的2个或更多像素映射到1DIP，将每个移动设备视为320PX设备。有一个非常短而甜蜜的课程，由Udacity自由提供，这通过Meta视口taglink到该课程。希望这会有所帮助：）