Question

你能说为什么这段代码不适应不同的移动设备？我是HTML初学者，无法弄明白。我正在使用Bootstrap 4框架。

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="xxxxx.css">
    <link href="https://fonts.googleapis.com/css?family=Bree+Serif|Gloria+Hallelujah|Indie+Flower" rel="stylesheet"> 

    <title>xxxxx</title>
  </head>
  <body>
  <div class = "container">
   <hr class = "spec-hr">
  <div class = "row justify-content-md-center">
    <div class = "col-md-6 text-left name">
  xxxxxx
  </div>
  <hr class = "spec-hr">
 </div>
  <div class="row justify-content-md-center intro">
    <div class="col-md-3 text-center">
      Photo
    </div>

    <div class="col-md-3 text-center">
      Kontakt<br>
      <p class = "email">xxxxx@gmail.com<br>
      mobile: xxxx<br>
      facebook: xxxxx</p>
    </div>
  </div>
  <hr class = "spec-hr">

  <!--Motto-->

  <div class="row justify-content-md-center motto">
    <div class="col-md-6 text-center">
      <p class="motto">Every day is a chance to get better<br></p>
       <p class = "podpis" >(Lukasz Fabianski, goalkeeper Sweansy City)</p>
    </div>
  </div>
  <hr class = "spec-hr">

  </div>
  </body>

 </html>

Answer 1

您使用col-md-6和col-md-3等类，这些类适用于中型屏幕。对于手机，您需要col-6和col-3等类。有关示例和定义，请参阅here

Answer 2

要使设计对移动设备做出响应，请使用引导类，如col-xs-3，col-xs-6。＆＃34; COL-XS - *＆＃34;用于定位宽度大于230且小于768的移动设备。还可以使用@media screen {}将特定样式定位到特定宽度的移动设备。

Answer 3

“你能说出为什么这段代码不适应不同的手机设备？“

元标记错误。它应该是：

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

如果没有正确的元标记，页面将从不响应。 Please read the documentation ...

“为了确保所有设备的正确渲染和触摸缩放，请添加响应式视口元标记到您的<head>。“

另见：

Simple Bootstrap page is not responsive on the iPhone
Responsive website zoomed out to full width on mobile

Bootstrap页面的响应性

3 个答案: