如何正确缩放移动页面？

时间：2019-05-24 07:16:27

标签： html css mobile-website

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

有什么想法吗？

在头部添加了视口width = 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;

ScreenShot

2 个答案:

答案 0 :(得分：0)

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

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

答案 1 :(得分：0)

尝试减小标题的字体大小，它会推送其他内容。你的css中有这个 .intro h1 {font-size：100px; }这会导致您的问题在CSS的末尾添加此行，以使媒体查询屏幕宽度小于800px的屏幕。

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