引导网格不会为手机重新缩放，但当我手动输入宽度时会重新缩放

这个问题在这里已经有答案了：

响应式网站在手机上缩小到全宽（4个答案）
引导程序在移动设备上无法正确扩展（4个答案）
昨天关门了。
我正在处理一个html页面。当我把它放在手机上时，它的缩放比例不合适。这很奇怪，因为我在浏览器中使用了f12工具，效果很好。
我查看了f12调试工具，发现了一些有趣的东西。当我选择电话时。缩放不再有效。选择手机时不缩放
另一方面。当我手动编辑宽度时，缩放就起作用了。如果我手动输入宽度，缩放就起作用`
这是这一页。我不知道发生了什么。现在是凌晨2点请帮忙

<!DOCTYPE html>
<html lang="de" xmlns:th="http://www.thymeleaf.org">
<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
    <meta charset="UTF-8">
    <title>Schnelltest</title>

</head>
<body class="bg-light">
<div class="container">

    <!--/* Workaround for bug https://youtrack.jetbrains.com/issue/IDEA-132738 -->
    <!--@thymesVar id="post" type="your.package.Post"-->
    <!--@thymesVar id="title" type="String"-->
    <!--@thymesVar id="content" type="String"-->
    <!--*/-->
    <div class="py-5 text-center">
        <img class="d-block mx-auto mb-4" src="../static/placeholder.png" alt="" width="72" height="57">
        <h2>Schnelltestzentrum Hochzeitsgeschäft</h2>
        <p class="lead">Um Wartezeiten zu verkürzen haben Sie die Möglichkeit Ihre Daten bereits im Vorfeld
            festzuhalten. Nach Zustellung Ihres Testergebnisses werden Ihre persönlichen Daten von unseren Servern
            gelöscht.</p>
    </div>
    <h4 class="mb-3">
        Anmeldung Covid-19 Schnelltest
    </h4>

    <form th:action="@{/registerUser}" th:object="${registrationDto}" method="POST">

        <div class="row">
            <div class="col-md-6 col-sm-12 mb-3">
                <label for="name" class="form-label">Vorname</label>
                <input type="text" class="form-control" id="name" th:field="*{firstName}" aria-describedby="nameHelp"
                       required>
            </div>

            <div class="col-md-6 col-sm-12 mb-3">
                <label for="surname" class="form-label">Nachname</label>
                <input type="text" class="form-control" id="surname" th:field="*{surName}"
                       aria-describedby="surnameHelp" required>
            </div>
        </div>
        <div class="mb-3">
            <label for="email" class="form-label">E-Mail</label>
            <div class="input-group has-validation">
                <span class="input-group-text">@</span>
                <input type="email" class="form-control" id="email" th:field="*{eMail}" required>
                <div class="invalid-feedback">
                    Die E-Mail wird benötigt um Ihnen ihr Ergebnis zu senden.
                </div>
            </div>
        </div>
        <div class="mb-4">
            <label for="birthday" class="form-label">Geburtsdatum</label>
            <input type="date" class="form-control" id="birthday" th:field="*{birthDate}"
                   aria-describedby="birthdayHelp" required>
        </div>
        <hr class="mb-4">

        <h4 class="mb-3">Adresse</h4>

        <div class="mb-3">
            <div class="row">
                <div class="col-md-8 mb-3">
                    <label for="street" class="form-label">Straße</label>
                    <input type="text" class="form-control" id="street" th:field="*{street}"
                           aria-describedby="streetHelp" required>
                </div>
                <div class="col-md-4 mb-3">
                    <label for="housenumber" class="form-label">Hausnummer</label>
                    <input type="number" class="form-control" id="housenumber" th:field="*{houseNumber}"
                           aria-describedby="housenumberHelp" required>
                </div>
            </div>
        </div>
        <div class="mb-3">
            <div class="row">
                <div class="col-md-4 mb-3">
                    <label for="zipCode" class="form-label">Postleitzahl</label>
                    <input type="number" class="form-control" id="zipCode" th:field="*{zipCode}"
                           aria-describedby="zipCodeHelp" required>
                </div>
                <div class="col-md-8 mb-3">
                    <label for="place" class="form-label">Ort</label>
                    <input type="text" class="form-control" id="place" th:field="*{place}" required>
                </div>
            </div>
        </div>
        <div class="mb-3 form-check">
            <input type="checkbox" class="form-check-input" id="exampleCheck1" required>
            <label class="form-check-label" for="exampleCheck1">
                <p>Ich habe die <a th:href="@{/dsgvo}">Datenschutzerklärung</a> zur Kenntnis genommen. Ich stimme zu, dass meine Angaben und Daten zur Beantwortung meiner Anfrage vorübergehend elektronisch erhoben und gespeichert werden.</p></label>
        </div>

        <button class="btn btn-primary btn-lg btn-block" type="submit">Bestätigen</button>

    </form>
</div>
</div>
</body>
</html>

引导网格不会为手机重新缩放，但当我手动输入宽度时会重新缩放

1条答案

相关问题

热门标签

最新问答