• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Meta viewport klappt nicht

Leomai

Neues Mitglied
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 quell
<!doctype html>
<html>
<head>
<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

der quellcode:


<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.toggle("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;
}


.dropdown {
position: relative;
display: inline-block;
}


.dropdown-content {
display: none;
position: absolute;
background-color: #B7A52D;
min-width: 320px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}


.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}


.show {display:block;}



section{
width: 320px;
height:1200px;
background-color: #076338}

footer{
width:320px;
}



könnt ihr mir helfen?
 
Werbung:
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 quell
<!doctype html>
<html>
<head>
<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

der quellcode:


<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.toggle("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;
}


.dropdown {
position: relative;
display: inline-block;
}


.dropdown-content {
display: none;
position: absolute;
background-color: #B7A52D;
min-width: 320px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}


.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}


.show {display:block;}



section{
width: 320px;
height:1200px;
background-color: #076338}

footer{
width:320px;
}



könnt ihr mir helfen?

Was soll denn auch passieren?
Hast ja keine einzige Media-Query im Code...

Ich vermute du willst den Viewport auf die 320px bringen.
Das könntest du via
Code:
TE hat keine Lösung verdient
erreichen.

Funktioniert allerdings nicht auf Desktops und sowieso der falsche Ansatz.

Verwende lieber Prozent; vor allem für die width-Angaben.
 
Zuletzt bearbeitet:
dann frag ich anders wenn man hier keine freundlichen antworten bekommt...


wie stell ich es, dass meine site auf allen mobilen bildschirmen bildschirmfüllend angezeigt wird.

will weder n weißen rand noch das es in die breite gezogen wird sondern dem entsprechd skaliert
 
Werbung:
Der Ton mag nicht ganz in Ordnung sein, aber ich kann die Reaktion verstehen. Du gehst davon aus mit einem meta-Element alle deine Probleme lösen zu können, da es alles für dich übernehmen könnte. Genau das gleiche machen wir hier aber auch nicht. Informiere dich mal darüber warum man per meta-Element den Viewport beeinflussen kann und was weitergehend dafür notwendig ist. Hier hab ich dir mal 2 Links als Einstiegshilfe rausgesucht:
http://wiki.selfhtml.org/wiki/Viewport
https://wiki.selfhtml.org/wiki/CSS/Media_Queries

Und wenn Du wieder Quellcode postest, bitte mit Code-Tags umgeben.
 
Werbung:
Zurück
Oben