内容在小宽度屏幕上缩小

Question

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

https://i.stack.imgur.com/B9cA1.png

（但所有其他元素都没有）。 而且我还注意到，如果屏幕宽度小于 350px，则控制台中 visualViewport.scale 的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>+38 (095) 415 31 56</span> <span><a href="mailto:support@cite.dev">support@cite.eu.org</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的定义，该定义仅在至少 600 像素宽的屏幕上应用 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>+38 (095) 415 31 56</span> <span><a href="mailto:support@cite.dev">support@cite.eu.org</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 。