当前位置： 文江博客话题详情

内容在小宽度屏幕上缩小

发布于 2025-01-11 09:50:08 字数 9436 浏览 0 评论 0原文

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

https://i.sstatic.net/B9cA1.png

（但所有其他元素都没有）。而且我还注意到，如果屏幕宽度小于 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>+38 (095) 415 31 56</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>

原文

I was testing my website in Chrome inspector (mobile device mode) and noticed that when screen width becomes less than about 350px, the footer starts to shrink as shown on picture

https://i.sstatic.net/B9cA1.png

(but all other elements don't). And also I've noticed that if screen is less than 350px in width, the output of visualViewport.scale in console returns the value less than 1.

My meta tag:

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

I didn't put the page code here, because it will be too much. What could possibly cause a problem?

UPD: Added snippet.

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">☰</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:[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 '© Cite, ' . date("Y") . '. Сайты на заказ.' ?>
                </div>
                <div class="bugreport">
                    Нашли ошибку или баг на сайте? Сообшите нам.
                </div>
            </div>
        </footer>
    </body>
    <script src="js/script.js"></script>
    <script src="js/zenscroll.js"></script>
</html>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

吃不饱 2025-01-18 09:50:08

在我看来， .flex-mob 元素中的内容可以防止它缩小到超过一定宽度，而页脚继续缩小。您可能还会得到一个水平滚动条。

我通常使用“移动优先”设计，其中基线 CSS 定义最小的屏幕尺寸（手机），并使用 @media (min-width...) 以较大的尺寸应用媒体查询。我没有更改您的所有 CSS 来遵循此策略，但我添加了 .flex-mob 的定义，该定义仅在宽度至少为 600px 的屏幕上应用 flexbox

我还删除了 < 的边距 。代码>，如由 カメron 推荐。

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">☰</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:[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 '© Cite, ' . date("Y") . '. Сайты на заказ.' ?>
    </div>
    <div class="bugreport">
      Нашли ошибку или баг на сайте? Сообшите нам.
    </div>
  </div>
</footer>

It seems to me that content in the .flex-mob element prevents it from shrinking beyond a certain width, while the footer continues to shrink. You might also get a horizontal scroll bar.

I typically use a "mobile first" design, in which baseline CSS defines the smallest screen size (phone) and the media queries are applied at larger sizes, using @media (min-width.... I have not changed all of your CSS to follow this strategy, but I added a definition for .flex-mob that applies flexbox only on screens that are at least 600px wide.

I also removed the margin from <body>, as suggested by カメロン.

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">☰</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:[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 '© Cite, ' . date("Y") . '. Сайты на заказ.' ?>
    </div>
    <div class="bugreport">
      Нашли ошибку или баг на сайте? Сообшите нам.
    </div>
  </div>
</footer>

回复 原文
桃扇骨 2025-01-18 09:50:08

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

解决方案：我添加了 min-width: 360px 到整个正文，然后从元标记中删除了initial-scale（以防止出现水平滚动）如果屏幕宽度小于 360 像素）。

但现在，所有具有 heigh: 100% 或 100vh 的元素都小于小于 360px 的屏幕上的实际屏幕高度，并且 visualViewport.scale 仍然小于比1。

Finally, I found the solution. I am not sure if it is the best way to workaround this problem but it is still here.

SOLUTION: I added min-width: 360px to the whole body and then removed initial-scale from meta tag (to prevent appearing a horizontal scroll if screen width less than 360px).

But now all elements with heigh: 100% or 100vh are less than actual screen height on screens less than 360px and visualViewport.scale is still less than 1.

回复 原文
浸婚纱 2025-01-18 09:50:08

我遇到了同样的问题，顺风中的 min-w-fit ，或者同等的，min-width: fit-content 为我修复了它。

I was having the same problem, min-w-fit in tailwind, or equivalenty, min-width: fit-content fixed it for me.

回复 原文
~没有更多了~

关于作者

春花秋月

暂无简介

文章
评论
25 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

饮湿

文章 0 评论 0

明月

文章 0 评论 0

02

文章 0 评论 0

hs1283

文章 0 评论 0

风向决定发型

文章 0 评论 0

落花浅忆

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文