Question

我不知道为什么我的页面不适合移动视图中的视口。您可以滚动页面，但不能缩小以适合整个页面。

我的头上有<meta name="viewport" content="width=device-width, initial-scale=1.0">（这只是为了清楚起见； CodePen会自动添加它）。

我的移动媒体查询通过CSS网格将页面从两列布局更改为一列。这是完整的移动媒体查询：

@media screen and (max-width: 767px) {
  .container {
    grid-template-columns: 1fr;
    grid-template-rows: auto 40rem auto auto 50rem auto auto auto 42rem auto auto;

    grid-template-areas:
      "header"
      "image"
      "intro"
      "pricing"
      "portrait"
      "about"
      "banner"
      "contact"
      "banner2"
      "video"
      "footer";
  }

  header {
    justify-content: center;
  }

  nav ul {
    display: none;
  }

  .logo {
    height: 3.5rem;
    padding: 0.1rem 1.9rem 0 0;
  }

  .intro-text {
    padding: 2rem 4rem 2rem 4rem;
  }

  .pricing-levels {
    flex-direction: column;
  }

  .pricing-levels:last-child {
    margin-bottom: 4rem;
  }

  .pricing-level {
    margin: 1.5rem auto;
    padding: 3rem;
    width: 75%;
  }

  .pricing-level:first-child {
    margin-top: 0;
  }

  .about-text {
    margin-bottom: 3rem;
  }

  .banner {
    /* Mobile-only image; better fit */
    background-image: url(https://github.com/nataliecardot/landing-page/blob/master/img/couple-heart.jpg?raw=true);
    background-position: center;
  }

  .banner-text {
    font-size: 3rem;
    margin: 15rem 0;
  }

  form {
    text-align: center;
  }

  .form-left {
    width: 85%;
    padding-right: 0;
    text-align: left;
    font-weight: bold;
  }

  .form-right {
    width: 85%;
    margin-top: 1.2rem;
  }

  .form-item {
    margin: 1rem 0;
  }
}

我尝试将max-width: 100%添加到正文和html，但是它什么也没做。另外，我没有another page和very similar code（主要区别是带有iframe的行），这种情况并没有发生。我将文件与差异工具进行了比较，找不到任何可以解决该问题的差异。

我已经检查了类似的问题，但它们没有有用的答案。

另外，使用我的其他媒体查询的平板电脑也不会出现此问题。

Answer 1

一个问题是您的视频iframe。它没有反应。

iframe#video {
    max-width: 100%;
}

编辑：

垂直滚动条的第二个原因是标题。标头的内容对于移动视图而言太宽泛了。

我在标题中添加了overview: hidden来进行演示。

=> https://codepen.io/anon/pen/XGgPWY

页面无法缩放以适合移动设备上的视口，无法缩小

1 个答案: