I was working on an html page. When i load it on my phone it wasn't scaled properly. Which is odd because i used the F12 tool in my browser and it worked fine.
I checked back at the F12 debug tool and found something interesting. When i select a phone. Scaling won't work anymore. No scaling when phone is selected
On the other hand. When I edit the width manually, scaling works. Scaling works if i enter width manually`
Here is the page. I don't know whats going on. It's 2am please help
<!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>
