Meta viewport klappt nicht

nguyenhaongnam · 29. Oktober 2018

Halli hallo ich arbeite gerade an der mobilen Version einer website, problem ich bekomm das mit dem meta viweport nicht hin, sodass die Seite immer richtig angezeigt wird

der quellcode:

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Unbenanntes Dokument</title>
<link href="thaistyle.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<header></header>
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Menü</button>
<div id="myDropdown" class="dropdown-content">
<a href="#">Über uns</a>
<a href="#">Massagen</a>
<a href="#">Preise</a>
<a href="#">Gutscheine</a>
<a href="#">Konatakt</a>
<a href="#">Impressum</a>
</div>
</div>
<script>
function myFunction() {
document.getElementById("myDropdown").classList.to ggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns;
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
<div id="adresse"></div>
<section></section>
<footer></footer>
</div>
</body>
</html>
mein css
@charset "utf-8";
header{
width: 320px;
height:100px;
background-color: brown;
flex-wrap: wrap;
}
#wrapper{background-color: #AA9820;
width:320px;
}
.dropbtn {
background-color: #B7A52D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #AA9820;
}

Alles anzeigen

Sailor · 29. Oktober 2018

Zitat

...sodass die Seite immer richtig angezeigt wird

Könntest du das etwas näher erläutern? Was denkst du, was da passieren soll mit deiner Seite? Alleine das Einfügen der 'meta viewport - Zeile' macht nichts, von dem, was du erwartest.
Um die Darstellung für mobile Geräte einzurichten, solltest du im CSS auf feste Größenangaben verzichten und ggf. mit @media Queries die Anzeige so einrichten, dass es für alle Displaygrößen passt.

Tags