Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
HILFE: Ich schaffe es nicht meine Webseiten Responsive zu machen
#1
Guten Abend alle zusammen,

ich versuche seit Stunden meine Test-Webseite Responsive zu machen, jedoch klappt dies nicht richtig, da die Darstellung auf meinem IPad und auf meinem IPhone 5s nicht wie gewünscht funktioniert.

Folgendes habe ich bisher ausprobiert:

Die HTML-Datei:
Code:
<!DOCTYPE HTML>
<html lang="de">
 <head>
   <link rel="stylesheet" href="test.css">
   <title>TestSeite</title>
 </head>
   <div id="kasten">
 <body>
 </body>
</html>

Die CSS-Datei:
Code:
* {
   margin: 0px;
   padding: 0px;
   background-color: dimgrey;
}

#kasten {
   height: 500px;
   width: 100%;
   background-color: lightblue;
}

@media only screen and (min-width:768px) and (max-width:1024px){
   #kasten {
       background-color: blue;
   }
}

@media only screen and (min-width:320px) and (max-width:480px){
   #kasten {
       background-color: red;
   }
}

Ich hoffe ihr könnt mir helfen, ich weiß, dass ich irgendeinen "einfachen" Fehler gemacht habe!
Das Ergebnis ist übrigend, dass auf meinem IPad der Hintergrund Blau ist und auf dem IPhone ebenfalls.
Liebe Grüße
Zitieren
#2
Hallo nochmal,

ich habe grade den Test mit der Webseiten Quicktools - Screenfly gemacht, damit wird mir komischerweise alles genau so angezeigt? Wieso wird dies auf meinem IPad bzw. auf meinem IPhone falsch angezeigt? (Wenn ist auf der Webseite auf die Größe eines IPhones gehe [320x568] dann ist der Hintergrund Rot und wenn ich auf das IPad wechsel [768x1024], dann ist auch der Hintergrund Blau.

Sehr komisch, ich habe an beiden Geräten bereits geschaut, ob die Desktop-Variante aktiviert ist. Gibt es eine CSS-Option, wo ich es so einstelle, dass es bei jedem mit diesem Gerät so ist? Falls das jemand anderes auch hat, dann sollte er schließlich auch die Webseite richtig sehen!

LG & Danke
Zitieren
#3
Probier mal im <head> den viewport zu definieren:

<meta name="viewport" content="width=device-width, initial-scale=1">
Allround Webdesign Freelancer | Design, HTML5, CSS3, JS, PHP, mySQL
Zitieren
#4
Hallo am_,

vielen Dank für die Antwort! Damit hat es geklappt.

LG
Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste