响应式设计模式无法显示正确的移动体验答案

【问题标题】：Responsive design mode doesn't show the right mobile experience响应式设计模式无法显示正确的移动体验
【发布时间】：2018-07-28 21:46:46
【问题描述】：

我一直在用 HTML 和 CSS 为我的书设计一个新封面。完成后，我在 Firefox 和 Google Chrome 中都看到了响应式设计模式的结果，但是当我在手机上用 Chrome（顺便说一下是 Galaxy s3）打开网站时，情况就完全不同了。这是我网站的link

我希望它与响应式设计模式中的一样

这是我的 HTML 和 CSS 文件：

@font-face{
  font-family: 'halogen';
  src: url(https://ali-xoerex.github.io/static/fonts/halogen.otf);
}

@keyframes iwoz{
  to{
    text-shadow: 1px 1px green;
    color: green;
  }
}

body{
  background: url(https://ali-xoerex.github.io/static/img/macos.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  font-family: 'Roboto', sans-serif;
}

.item , #clock{
  margin-top: 3px;
}

.navigation{
  width: 100%;
  background:  rgba(109, 110, 112,0.3);
  top: 0;
  left: 0;
  position: fixed;
  height: auto;
  color: whitesmoke;
}

.title{
  margin-top: 3%;
  height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header{
  border-bottom: 1px solid gray;
  width: 100%;
  display: flex;
  flex-direction: row;
  border-top: 1px solid #ebebeb;
  border-top-left-radius: 1%;
  border-top-right-radius: 1%;
  background: -moz-linear-gradient(to top,#ebebeb, #d5d5d5);
  background: -webkit-linear-gradient(to top,#ebebeb, #d5d5d5);
  background: -o-linear-gradient(to top,#ebebeb, #d5d5d5);
  background: linear-gradient(to top,#ebebeb, #d5d5d5);
}

.close{
  text-indent: -99999px;
  border: 1px solid #ff5c5c;
  background: #ff5c5c;
  display: flex;
  padding-left: 2px;
  padding-bottom: 2px;
  justify-content: center;
  border-radius: 50%;
  font-size: 9px;
  height: 10px;
  width: 10px;
}

.close:hover{text-indent: 0;}
.minimize:hover{text-indent: 0;}
.size:hover{text-indent: 0;}

.size{
  text-indent: -99999px;
  border: 1px solid #ffbd4c;
  background: #ffbd4c;
  display: flex;
  padding-left: 2px;
  padding-bottom: 2px;
  justify-content: center;
  border-radius: 50%;
  font-size: 9px;
  height: 10px;
  width: 10px;
}

.minimize{
  text-indent: -99999px;
  border: 1px solid  #00ca56;
  background:  #00ca56;
  display: flex;
  padding-left: 2px;
  padding-bottom: 2px;
  justify-content: center;
  border-radius: 50%;
  font-size: 9px;
  height: 10px;
  width: 10px;
}

.h{
  margin-left: 45%;
}

.buttons{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center; 
  min-width: 55px;
}

.right{
  margin-right: 10px;
}


.content{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-family: 'halogen';
  font-size: 80px;
  animation: iwoz 2s forwards;
}

.window{
  border: 2px solid #ebebeb;
  background: rgba(109, 110, 112,0.3);
  border-radius: 1%;
  width: 800px;
  height: 70%;
  max-height: auto;
  margin-bottom: 4%;
}

.main{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.icons{
  display: flex;
  justify-content: space-around;
}

.left{
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  min-width: 85px;
  margin-left: 10px;
}

.dock{
  width: 50%;
  height: auto;
  border-top-left-radius: 2%;
  border-top-right-radius: 2%;
  background: rgba(109, 110, 112,0.8);
  left: 25%;
  bottom: 0;
  position: fixed;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>IWoz Cover</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="static/css/index.css" />
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 
</head>
<body>
    <div class="navigation">
      <div class="main">
          <div class="left">
              <div class="logo"><img src="https://ali-xoerex.github.io/static/img/apple.png" alt=""></div>
              <div class="item">IWoz</div>
          </div>
          <div id="clock" class="right">
          </div>
      </div>
    </div>
    <div class="title">
      <div class="window">
        <div class="header">
          <div class="buttons" style="display:flex;flex-direction:row">
            <div class="close">
              X
            </div>
            <div class="size">
                -
            </div>
            <div class="minimize">
                +
            </div>
          </div>  
          <div class="h">IWoz</div>
        </div>
        <div class="content">
          IWoz
        </div>
      </div>
    </div>
    <div class="dock">
      <div class="icons">
        <a href="https://github.com/Ali-Xoerex/Ali-Xoerex.github.io" role="button"><img src="https://ali-xoerex.github.io/static/img/github.png" alt=""></a>
        <a href="https://ali-xoerex.github.io/chapters/1/1.html" role="button"><img src="https://ali-xoerex.github.io/static/img/book.png" alt=""></a>
      </div>
    </div>
    <script>
      function update_clock(){
        let days = ["Sun", "Mon", "Tues", "Wed", "Thurs", "Fri", "Sat"]
        let date = new Date();
        let clock = date.toLocaleTimeString();
        document.getElementById('clock').innerText = days[date.getDay()]+' '+clock
      }
      setInterval(update_clock,1000);
    </script>
</body>
</html>

任何帮助都会非常感激

【问题讨论】：

标签： html css responsive-design

【解决方案1】：

如果您检查背景图像所依赖的 body 元素的高度，它不会完全覆盖整个屏幕。只需添加高度：100vh；到你的身体元素。

【讨论】：

非常感谢！
我建议你把背景放在html元素上。

【解决方案2】：

由于您没有提供屏幕截图和具体问题，我只能假设您指的是没有到达屏幕底部的背景。

您在桌面浏览器上看到的行为并不完全正确。您将背景放在body 上，由于div.navigation 和div.dock 已定位，它的尺寸仅取决于边界div.title，它不会到达屏幕底部。

您可以执行以下操作：

将body 设置为min-height: 100vh。现在，由于有一些边距，您将获得一个滚动条。
将div.title margin-top: 3% 更改为padding-top: 3%
将body 上的默认margin 更改为padding - 在body 上设置margin: 0 并在正文上添加padding: 8px。

【讨论】：