Bootstrap - 手机上的小内容

Question

我正在为一个项目制作网站。我在使其与任何类型的手机“兼容”时遇到了一些问题，因为网站上的所有内容都非常小，并且必须放大某些内容才能阅读它所说的内容。

这是我当前的代码：

    body, html {
      overflow-x: hidden;
      font-family: 'Montserrat', sans-serif;
    }
    #author__image {
      width: 125px;
      height: 125px;
    border-radius: 50%;
      border: 5px solid white;
      margin-bottom: 10px;
      -webkit-animation-duration: 1.5s;
      -webkit-animation-delay: .5s;
    }
    #profile__name {
      font-family: 'Montserrat', sans-serif;
      -webkit-animation-duration: 1.5s;
      -webkit-animation-delay: .8s;
    }
    #profile__asset {
      color: #CCCCCC;
      text-align: center;
      font-family: 'Hind', sans-serif;
      font-size: 18px;
      -webkit-animation-duration: 1.5s;
      -webkit-animation-delay: 1.1s;
    }
    .header img {
      margin-top: 35vh;
    }
    
    .profile__links {
      -webkit-animation-duration: 1.5s;
      -webkit-animation-delay: 1.4s;
    }
    button {
      border-radius: 50%;
      width: 40px;
      height: 40px;
      font-size: 18px;
      margin: 15px 5px 5px 5px;
      background: white;
      border: none;
      cursor: pointer;
    }
    
    #twitter {
      color: #55acee;
      background: white;
      border: white 2px solid;
    }
    
    #linkedin {
      color: #007cb7;
      background: white;
      border: white 2px solid;
    }
    #github {
      color: #333333;
      background: white;
      border: white 2px solid;
    }

<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Hind:300" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/animate.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>Test Website</title>

<div class="fluid-container">
    <div class="row">
        <section class="module parallax parallax-1">
            <div class="container header">
                <div class="col-12 text-center">
                    <img class="animated fadeIn" id="author__image" src="assets/profile_image.jpg">
                </div>
                <div class="col-12">
                    <h1 class="animated fadeIn" id="profile__name">Lucas Lund Jensen</h1>
                </div>
                <div class="col-12">
                    <p class="animated fadeIn" id="profile__asset">HTML - JAVA - C# DEVELOPER</p>
                </div>
                <div class="col-12 text-center animated fadeIn profile__links">
                    <button id="twitter">
                        <i class="fa fa-twitter" aria-hidden="true"></i>
                    </button>
                    <button id="linkedin">
                        <i class="fa fa-linkedin" aria-hidden="true"></i>
                    </button>
                    <button id="github">
                        <i class="fa fa-github" aria-hidden="true"></i>
                    </button>
                    <button id="email">
                        <i class="fa fa-envelope-o" aria-hidden="true"></i>
                    </button>
                </div>
            </div>
        </section>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/parallax.js"></script>

Answer 1

您需要在 HTML 的 head 标签中添加一个 meta 标签。

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

您可能也希望在您的 CSS 中使用它：

@-ms-viewport{
    width: device-width;
}

Answer 2

您应该拥有类似于class="col-sm-12" 而不是class="col-12" 的内容。查看 w3 学校引导程序：http://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp

Answer 3

你应该用 container-fluid 更正 class:fluid-container 这至少是第一个错误

Answer 4

您还需要将cols 包装在row 类中。看看这段编辑过的代码：

<div class="container-fluid">
<div class="row">
    <section class="module parallax parallax-1">
        <div class="container header">
           <div class="row">
            <div class="col-md-12 text-center">
                <img class="animated fadeIn" id="author__image" src="assets/profile_image.jpg">
            </div>
            <div class="col-md-12">
                <h1 class="animated fadeIn" id="profile__name">Lucas Lund Jensen</h1>
            </div>
            <div class="col-md-12">
                <p class="animated fadeIn" id="profile__asset">HTML - JAVA - C# DEVELOPER</p>
            </div>
            <div class="col-md-12 text-center animated fadeIn profile__links">
                <button id="twitter">
                    <i class="fa fa-twitter" aria-hidden="true"></i>
                </button>
                <button id="linkedin">
                    <i class="fa fa-linkedin" aria-hidden="true"></i>
                </button>
                <button id="github">
                    <i class="fa fa-github" aria-hidden="true"></i>
                </button>
                <button id="email">
                    <i class="fa fa-envelope-o" aria-hidden="true"></i>
                </button>
            </div>
        </div>
       </div>
    </section>
</div>