内容在小宽度屏幕上缩小

Question

我在 Chrome 检查器（移动设备模式）中测试我的网站，注意到当屏幕宽度变得小于 350px 时，页脚开始缩小，如图所示

（但所有其他元素都没有）。而且我还注意到，如果屏幕宽度小于 350px，则控制台中

visualViewport.scale

的输出返回的值小于

1

.

我的元标签：

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

这里没有放页面代码，因为会太多。什么可能导致问题？

UPD：添加了片段。

footer {
    font-weight: 300;
    margin-top: auto;
    background-color: rgb(36, 36, 36);
    color: rgb(156, 156, 156);
}

.footer-cont {
    padding: 0 5%;
}

.footer-line {
    height: 60px;
    margin-bottom: 30px;
    background-color: rgb(32, 32, 32);
    color: whitesmoke;
}

.footer-line-cont {
    display: flex;
    margin: auto;
    font-weight: 500;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

.footer-line-text {
    font-size: 0.8em;
    padding: 0 5px;
}

.social {
    height: 100%;
}

.social-icon {
    height: 100%;
    padding: 20px 15px;
}

.footer-flex {
    display: flex;
    margin: auto;
    justify-content: space-between;
}

.footer-flex-text {
    line-height: 1.8em;
    max-width: 400px;
    font-size: 0.9em;
}

.footer-flex-contacts {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    max-width: 400px;
    font-size: 0.9em;
}

.footer-flex-contacts span {
    font-size: 1.1em;
    line-height: 1.8em;
    white-space: pre;
    margin: 0px 0;
}

.orderButtonFoot {
    width: 100%;
    border-radius: 3px;
    background-color: whitesmoke;
    color: black;
    border: 2px solid whitesmoke;
    text-align: center;
    padding: 18px 16px;
    margin: 12px 0;
    font-weight: 500;
    font-size: 1.1em;
    cursor: pointer;
    transition: all 200ms ease, padding 0s;
    -webkit-transition: all 200ms ease, padding 0s;
    -moz-transition: all 200ms ease, padding 0s;
}

.orderButtonFoot:hover {
    background-color: rgba(0, 0, 0, 0);
    color: white;
}

.footer-remarks {
    padding: 10px 0;
}

.footer-remarks p {
    font-size: 12px;
    padding: 5px 0px;
}

.copyright-cont {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    padding: 20px;
    background-color: rgb(41, 41, 41);
    color: whitesmoke;
}

.bugreport {
    text-align: right;
}

@media (max-width: 600px) {
    .bugreport {
        display: none;
    }

    .copyright-cont {
        justify-content: center;
    }
}

@media (max-width: 500px) {
    .footer-line {
        height: 80px;
        padding: 10px 5%;
    }

    .footer-flex {
        flex-direction: column;
    }

    .footer-flex-text {
        margin: auto;
        text-align: center;
    }

    .footer-flex-contacts {
        margin: auto;
        align-items: center;
    }

    .orderButtonFoot {
        margin-top: 20px;
    }
}



header {
    background-color: rgba(24, 24, 24, 0.95);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1;
}

.menuButton {
    display: none;
    position: absolute;
    right: 0;
    color: white;
    font-size: 1.5em;
    line-height: 65px;
    text-align: center;
    margin: 10px 10px;
    width: 65px;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
    z-index: 2;
}

.logo {
    color: white;
    font-size: 30px;
    font-weight: bold;
    font-family: 'Fredoka One', Arial;
    line-height: 65px;
    padding: 0 8px;
}

.margin-nav {
    height: 85px;
}

nav {
    position: relative;
    padding: 10px 5%;
    display: flex;
    margin: auto;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
}

nav div ul {
    display: flex;
    list-style: none;
}

nav ul li {
    margin: 0px 3px;
}

nav div ul li a {
    display: block;
    text-align: center;
    padding: 16px 16px;
}

nav div ul li a.active {
    color: rgb(155, 155, 155);
}

.orderButton {
    border-radius: 3px;
    background-color: #e8e8e8;
    color: black;
    border: 2px solid #e8e8e8;
    text-align: center;
    padding: 14px 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 200ms ease, padding 0s;
    -webkit-transition: all 200ms ease, padding 0s;
    -moz-transition: all 200ms ease, padding 0s;
}

.orderButton:hover {
    background-color: rgba(0, 0, 0, 0);
    color: white;
}

@media (max-width: 500px) {
    nav div ul {
        text-align: center;
        flex-direction: column;
        margin-top: 50px;
        transition: opacity 200ms ease;
    }
    
    nav div ul li {
        margin: 20px 3px;
    }
    
    nav {
        flex-direction: column;
    }

    .nav {
        overflow: hidden;
        height: 0;
        width: 100%;
        max-width: 400px;
        transition: height 300ms ease-in-out;
        -webkit-transition: height 300ms ease-in-out;
        -moz-transition: height 300ms ease-in-out;
    }

    .orderButton {
        padding: 20px;
    }
    
    .logo {
        text-align: center;
    }
    
    .menuButton {
        display: block;
    }

    .nav.active {
        height: 100vh;
    }
}

.flex-mob {
            display: flex;
            height: 60vh;
            text-align: center;
            align-items: center;
            justify-content: center;
            margin: 30px 0;
            flex: 1;
            }

<head>
<html>
 <body>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, shrink-to-fit=no">
</head>
<header>
        <div class="menuButton">&#9776;</div>
    <nav>
        <a href="/" class="logo">Cite</a>
        <div class="nav">
            <ul>
                <li><div class="orderButton">Заказать</div></li>
                <li><a href="/about.php" id="aboutBtn">О нас</a></li>
                <li><a href="#bottom" id="contactsBtn">Контакты</a></li>
            </ul>
        </div>
    </nav>
    </header>
  <div class="flex-mob">
        <div class="flex-text-mob">
            <h2>Адаптивный дизайн</h2>
            <p>Одинаково хорошо отображается как на мобильных устройствах, так и на десктопах и ноутбуках.</p>
        </div>  
        <div class="flex-device"></div>
        <div class="flex-text-mob">
            <h2>Портрет | ландшафт</h2>
            <p>Элементы дизайна подстраиваются под ориентацию экрана и размеры окна.</p>
        </div>
    </div>
    <footer>
            <div class="footer-line footer-cont">
                <div class="footer-line-cont">
                    <div class="footer-line-text">Связь с нами:</div>
                    <div class="social">
                        <img class="social-icon" src="images/inst.png" alt="instagram">
                        <img class="social-icon" src="images/telegram.png" alt="telegram">
                    </div>
                </div>
            </div>
            <div class="footer-cont">
                <div class="footer-flex">
                    <div class="footer-flex-text">
                        Остались вопросы? Вы всегда можете связаться с нами и уточнить интересующие детали.
                    </div>
                    <div class="s25"></div>
                    <div class="footer-flex-contacts">
                        <span>[phone]</span>
                        <span><a href="mailto:[email protected]">[email protected]</a></span>
                        <button type="button" class="orderButtonFoot">Заказать</button>
                    </div>
                </div>
                <div class="footer-remarks">
                    <p><sup>1</sup> Домен оплачивается заказчиком отдельно раз в год, согласно тарифа регистратора.</p>
                    <p><sup>2</sup> Хостинг также оплачивается заказчиком отдельно. Мы не несем ответственности за изменение тарифов хостинг-провайдеров и регистраторов.</p>
                </div>
            </div>
            <div class="copyright-cont">
                <div class="copyright">
                    <?php echo '&copy; Cite, ' . date("Y") . '. Сайты на заказ.' ?>
                </div>
                <div class="bugreport">
                    Нашли ошибку или баг на сайте? Сообшите нам.
                </div>
            </div>
        </footer>
    </body>
    <script src="js/script.js"></script>
    <script src="js/zenscroll.js"></script>
</html>

Answer 1

在我看来，

.flex-mob

元素中的内容阻止它缩小超过一定宽度，而页脚继续缩小。您可能还会得到一个水平滚动条。

我通常使用“移动优先”设计，其中基线 CSS 定义最小屏幕尺寸（手机），媒体查询应用于较大尺寸，使用

@media (min-width...

。我没有改变你所有的 CSS 来遵循这个策略，但是我添加了一个

.flex-mob

的定义，它只在至少 600px 宽的屏幕上应用 flexbox。

我还删除了

<body>

的边距，正如由カミロン所建议的那样。

body {
  margin: 0;
}

footer {
  font-weight: 300;
  margin-top: auto;
  background-color: rgb(36, 36, 36);
  color: rgb(156, 156, 156);
}

.footer-cont {
  padding: 0 5%;
}

.footer-line {
  height: 60px;
  margin-bottom: 30px;
  background-color: rgb(32, 32, 32);
  color: whitesmoke;
}

.footer-line-cont {
  display: flex;
  margin: auto;
  font-weight: 500;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.footer-line-text {
  font-size: 0.8em;
  padding: 0 5px;
}

.social {
  height: 100%;
}

.social-icon {
  height: 100%;
  padding: 20px 15px;
}

.footer-flex {
  display: flex;
  margin: auto;
  justify-content: space-between;
}

.footer-flex-text {
  line-height: 1.8em;
  max-width: 400px;
  font-size: 0.9em;
}

.footer-flex-contacts {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  max-width: 400px;
  font-size: 0.9em;
}

.footer-flex-contacts span {
  font-size: 1.1em;
  line-height: 1.8em;
  white-space: pre;
  margin: 0px 0;
}

.orderButtonFoot {
  width: 100%;
  border-radius: 3px;
  background-color: whitesmoke;
  color: black;
  border: 2px solid whitesmoke;
  text-align: center;
  padding: 18px 16px;
  margin: 12px 0;
  font-weight: 500;
  font-size: 1.1em;
  cursor: pointer;
  transition: all 200ms ease, padding 0s;
  -webkit-transition: all 200ms ease, padding 0s;
  -moz-transition: all 200ms ease, padding 0s;
}

.orderButtonFoot:hover {
  background-color: rgba(0, 0, 0, 0);
  color: white;
}

.footer-remarks {
  padding: 10px 0;
}

.footer-remarks p {
  font-size: 12px;
  padding: 5px 0px;
}

.copyright-cont {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 20px;
  background-color: rgb(41, 41, 41);
  color: whitesmoke;
}

.bugreport {
  text-align: right;
}

@media (max-width: 600px) {
  .bugreport {
    display: none;
  }
  .copyright-cont {
    justify-content: center;
  }
}

@media (max-width: 500px) {
  .footer-line {
    height: 80px;
    padding: 10px 5%;
  }
  .footer-flex {
    flex-direction: column;
  }
  .footer-flex-text {
    margin: auto;
    text-align: center;
  }
  .footer-flex-contacts {
    margin: auto;
    align-items: center;
  }
  .orderButtonFoot {
    margin-top: 20px;
  }
}

header {
  background-color: rgba(24, 24, 24, 0.95);
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1;
}

.menuButton {
  display: none;
  position: absolute;
  right: 0;
  color: white;
  font-size: 1.5em;
  line-height: 65px;
  text-align: center;
  margin: 10px 10px;
  width: 65px;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
  z-index: 2;
}

.logo {
  color: white;
  font-size: 30px;
  font-weight: bold;
  font-family: 'Fredoka One', Arial;
  line-height: 65px;
  padding: 0 8px;
}

.margin-nav {
  height: 85px;
}

nav {
  position: relative;
  padding: 10px 5%;
  display: flex;
  margin: auto;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
}

nav div ul {
  display: flex;
  list-style: none;
}

nav ul li {
  margin: 0px 3px;
}

nav div ul li a {
  display: block;
  text-align: center;
  padding: 16px 16px;
}

nav div ul li a.active {
  color: rgb(155, 155, 155);
}

.orderButton {
  border-radius: 3px;
  background-color: #e8e8e8;
  color: black;
  border: 2px solid #e8e8e8;
  text-align: center;
  padding: 14px 16px;
  font-weight: 700;
  cursor: pointer;
  transition: all 200ms ease, padding 0s;
  -webkit-transition: all 200ms ease, padding 0s;
  -moz-transition: all 200ms ease, padding 0s;
}

.orderButton:hover {
  background-color: rgba(0, 0, 0, 0);
  color: white;
}

@media (max-width: 500px) {
  nav div ul {
    text-align: center;
    flex-direction: column;
    margin-top: 50px;
    transition: opacity 200ms ease;
  }
  nav div ul li {
    margin: 20px 3px;
  }
  nav {
    flex-direction: column;
  }
  .nav {
    overflow: hidden;
    height: 0;
    width: 100%;
    max-width: 400px;
    transition: height 300ms ease-in-out;
    -webkit-transition: height 300ms ease-in-out;
    -moz-transition: height 300ms ease-in-out;
  }
  .orderButton {
    padding: 20px;
  }
  .logo {
    text-align: center;
  }
  .menuButton {
    display: block;
  }
  .nav.active {
    height: 100vh;
  }
}

@media (min-width: 600px) {
  .flex-mob {
    display: flex;
    height: 60vh;
    text-align: center;
    align-items: center;
    justify-content: center;
    margin: 30px 0;
    flex: 1;
  }
}

<header>
  <div class="menuButton">&#9776;</div>
  <nav>
    <a href="/" class="logo">Cite</a>
    <div class="nav">
      <ul>
        <li>
          <div class="orderButton">Заказать</div>
        </li>
        <li><a href="/about.php" id="aboutBtn">О нас</a></li>
        <li><a href="#bottom" id="contactsBtn">Контакты</a></li>
      </ul>
    </div>
  </nav>
</header>
<div class="flex-mob">
  <div class="flex-text-mob">
    <h2>Адаптивный дизайн</h2>
    <p>Одинаково хорошо отображается как на мобильных устройствах, так и на десктопах и ноутбуках.</p>
  </div>
  <div class="flex-device"></div>
  <div class="flex-text-mob">
    <h2>Портрет | ландшафт</h2>
    <p>Элементы дизайна подстраиваются под ориентацию экрана и размеры окна.</p>
  </div>
</div>
<footer>
  <div class="footer-line footer-cont">
    <div class="footer-line-cont">
      <div class="footer-line-text">Связь с нами:</div>
      <div class="social">
        <img class="social-icon" src="images/inst.png" alt="instagram">
        <img class="social-icon" src="images/telegram.png" alt="telegram">
      </div>
    </div>
  </div>
  <div class="footer-cont">
    <div class="footer-flex">
      <div class="footer-flex-text">
        Остались вопросы? Вы всегда можете связаться с нами и уточнить интересующие детали.
      </div>
      <div class="s25"></div>
      <div class="footer-flex-contacts">
        <span>[phone]</span>
        <span><a href="mailto:[email protected]">[email protected]</a></span>
        <button type="button" class="orderButtonFoot">Заказать</button>
      </div>
    </div>
    <div class="footer-remarks">
      <p><sup>1</sup> Домен оплачивается заказчиком отдельно раз в год, согласно тарифа регистратора.</p>
      <p><sup>2</sup> Хостинг также оплачивается заказчиком отдельно. Мы не несем ответственности за изменение тарифов хостинг-провайдеров и регистраторов.</p>
    </div>
  </div>
  <div class="copyright-cont">
    <div class="copyright">
      <?php echo '&copy; Cite, ' . date("Y") . '. Сайты на заказ.' ?>
    </div>
    <div class="bugreport">
      Нашли ошибку или баг на сайте? Сообшите нам.
    </div>
  </div>
</footer>

Answer 2

最后，我找到了解决方案。我不确定这是否是解决此问题的最佳方法，但它仍然存在。

解决方案：我

added min-width: 360px

到整个身体，然后从元标记中删除

initial-scale

（以防止在屏幕宽度小于360px时出现水平滚动）。

但是现在所有带

heigh: 100%

或

100vh

的元素在小于360px的屏幕上都小于实际屏幕高度，

visualViewport.scale

仍然小于

1

.

Answer 3

我遇到了同样的问题，

min-w-fit

顺风，或等价物，

min-width: fit-content

为我修好了。