CSS fixed funktioniert nicht auf Mobil-Geräten

Hat man ein Element der Seite mit der CSS-Eigenschaft „fixed“ positioniert, kann es passieren, dass dieses dennoch auf mobilen Geräten mitscrollt (bzw. auch in den DevTools wenn man ein mobiles Gerät simuliert). Dies dann wenn irgendein Element der Seite über die Seite des Bildschirms herausragt, also nicht alles perfekt responsive dargestellt wird.

Beispiel: wir möchten eine Navigation-Bar immer oben am Bildschirm „fixieren“:

.navbar {
  height: 100px;
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
}Code-Sprache: CSS (css)

Damit diese auch wirklich auch auf dem Handy oder Tablet fixiert bleibt, muss im HTML-Header folgendes stehen:

 <meta content="width=device-width, initial-scale=1, minimum-scale=1" name="viewport">Code-Sprache: HTML, XML (xml)

Danach sollte die Navbar auch auf mobilen Devices wie gewünscht fixiert bleiben.