html - 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 name="viewport" content="width=device-width, initial-scale=1">

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

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