正文、HTML 尺寸过大答案

【问题标题】：Body, HTML having excessive size正文、HTML 尺寸过大
【发布时间】：2021-01-03 22:59:17
【问题描述】：

首先，这里是pen。

HTML

<body>
  <div class="header">
    <img src="https://images.unsplash.com/photo-1586244439413-bc2288941dda?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt="" class="profile-image">
    <p class="name-text">
      Hello???????? <span class="IGHandle">| @something</span>
    </p>
    <div class="description">
      <p>Nothing here... so lorem ipsum</p>
    </div>
  </div>
  <div id="other-links">
   
  </div>
  <div id="social--main">
    <script type="text/javascript" src="js/addSocialItem.js" charset="utf-8"></script>
  </div>
</body>

</html>

SCSS

body {
  overflow-x: hidden;
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Raleway', sans-serif;
  margin: 0;
  padding: 0;
}

* {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;

  &:active,
  &:hover,
  &:visited {
    text-decoration: none;
  }
}

.header {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: auto;

  .profile-image {
    z-index: 10;
    height: 175px;
    width: 175px;
    border-radius: 20px;
    margin-bottom: 20px;
    box-shadow: 5px 5px 20px rgba(#335d2d, 0.2);
  }

  .name-text {
    font-size: 20px;
    font-weight: 700;

    .IGHandle {
      font-weight: 500;
      color: rgba(black, 0.7);
    }
  }

  .description {
    max-width: 300px;
    padding: 10px;
    margin-bottom: 10px;

    p {
      font-size: 16px;
      color: rgba(black, 0.35);
      line-height: 1.4;
    }
  }
}

#social--main {
  display: grid;
  grid-template-columns: repeat(4, auto);
  grid-gap: 7px 7px;
  padding: 10px;
}

.social-item {
  margin: 7px;
  padding: 10px;
  display: inline-block;
  border-radius: 30%;

  .bx {
    align-self: center;
    font-size: 40px;
    padding: 0;
    margin: 0;
  }
}

#other-links {
  margin-bottom: 20px;
  margin-top: -15px;
  display: flex;
  flex-direction: column;
  align-items: center;

  .other-link {
    font-weight: 600;
    display: block;
    color: #2a3d66;
    position: relative;
    margin-top: 15px;
    width: 270px;
    height: auto;
    padding: 15px;
    font-size: 20px;
    background-color: rgba(#2a3d66, 0.2);
    border-radius: 20px;
  }
}

/*jshint esversion: 6 */

var mainSocialtems = [{
  "name": "dribbble",
  "color": "234, 76, 137",
  "href": "",
  "classes": "bxl-dribbble",
}, {
  "name": "instagram",
  "color": "193,53,132",
  "href": "",
  "classes": "bxl-instagram",
}, {
  "name": "behance",
  "color": "23,105,255",
  "href": "",
  "classes": "bxl-behance",
}, {
  "name": "linkedin",
  "color": "0,119,181",
  "href": "",
  "classes": "bxl-linkedin",
},];

var socialMain = document.getElementById('social--main');

for (var i = 0; i < mainSocialtems.length; i++) {
  const linkContainer = document.createElement('a');
  linkContainer.setAttribute('class', 'social-item');
  linkContainer.setAttribute('href', mainSocialtems[i].href);
  linkContainer.setAttribute('style', "background-color: rgba(" + mainSocialtems[i].color + ", 0.08)");

  const link = document.createElement('i');
  link.setAttribute('class', 'bx ' + mainSocialtems[i].classes);
  link.style.color = `rgb(${mainSocialtems[i].color})`;
  linkContainer.appendChild(link);

  socialMain.appendChild(linkContainer);
}

var linkItems = [{
  "name": "2020 so far",
  "color": "207,117,0",
  "href": "",
}, {
  "name": "event update",
  "color": "106,25,125",
  "href": "",
},];

var linkBox = document.getElementById('other-links');

for (var i = 0; i < linkItems.length; i++) {
  const linkContainer = document.createElement('a');
  linkContainer.setAttribute('class', 'other-link');
  linkContainer.setAttribute('href', linkItems[i].href);
  linkContainer.setAttribute('style', "background-color: rgba(" + linkItems[i].color + ", 0.2); color: rgb(" + linkItems[i].color + ")");

  linkContainer.innerText = linkItems[i].name + " ";

  const linkIcon = document.createElement('i');
  linkIcon.setAttribute('class', 'bx bx-link-external');
  linkContainer.appendChild(linkIcon);

  linkBox.appendChild(linkContainer);
}

所以页面在桌面上正常工作，但是每当我在移动视口中打开它时，它会做一些奇怪的事情，body 有很多过大的尺寸，虽然所有单位都以 px 为单位，但元素的大小正在减小。

this is what I am saying

以前从未遇到过这样的事情，也找不到导致这种情况的原因。

请帮忙！

谢谢

【问题讨论】：

他确实提供了它codepen.io/illusion47586/pen/gOrdMNa
@AlonEitan 现在添加代码

标签： html css google-chrome web sass

【解决方案1】：

首先，让我们确保您的头上有元视口。

<meta
  name="viewport"
  content="width=device-width,user-scalable=no,minimum-scale=1,maximum-scale=1"
/>

其次，将你的身体 height 更新为 min-height。
如果内容多于可用视口，这允许用户在内容上滚动。 ?

body {
  overflow-x: hidden;
  min-height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Raleway', sans-serif;
  margin: 0;
  padding: 0;
}
...

【讨论】：