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

Question

桌面上的一切都很好。除了 header 简介外，几乎所有内容在移动设备上也能正常缩放。甚至导航栏也能完美缩放。

有什么想法吗？

添加了视口宽度=device-width 和头部的初始 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

别忘了将此添加到您的 <Head>

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

Answer 2

尽量把标题的字号调小，会挤其他内容。你的 css 里有这个 .intro h1 { font-size: 100px; } 这会导致你的问题在 css 末尾添加此行，使媒体查询宽度小于 800 像素。

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

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

How to get mobile page scaling correctly?

html

css

mobile-website

Html

CSS

屏幕截图