html - 如何正确获取移动页面缩放？

Question

桌面上的一切都很好。几乎所有内容都可以在移动设备上很好地缩放，除了标题介绍。甚至导航栏也能完美缩放。

有什么想法吗？

添加了 viewport width=device-width 和 initial sacle 到头部，没有改变任何东西。

HTML

<header id="header">
  <div class="intro">
    <div class="overlay">
      <div class="container">
        <div class="row">
          <div class="col-md-8 col-md-offset-0 intro-text">
            <h1>IRON LANDSCAPING</h1>
            <p>Bringing your home the best.</p>
            <a href="#about" class="btn btn-custom btn-lg page-scroll">More Info</a> </div>
        </div>
      </div>
    </div>
  </div>
</header>
<!-- About Section -->

CSS

.intro {
    display: inline;
    width: 100%;
    padding: 0;
    background: url(../img/intro-bg.jpg) top center no-repeat;
    background-color: #808080;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;

截图

Answer 1

尝试降低标题的字体大小，它会插入其他内容。你有这个在你的CSS.intro h1 { 字体大小:100px； } 这会导致你的问题在您的 css 末尾添加此行，以便对宽度小于 800 像素的屏幕进行媒体查询。

@media only screen and (max-width: 799px) {
  .intro h1 {
    font-size: 36px;
  }
}