Tony-S
PC-Selbstbauer(in)
Testen im Browser - eine CSS für alle Geräte
Hallo Forum,
ich habe mir eine ganz simple CSS-Datei geschrieben die einfach nur eine unterschiedliche Darstellung auf meinem iPhone und PC ermöglichen soll.
Das klappt auch wunderbar, nur testen lässt sich das sehr schlecht: Dateien auf Webspace laden, Webseite am iPhone aufrufen. Also hab ich mir eine Chrome-Extension (http://goo.gl/hUrx5) geladen die den Browser auf bestimmte Größen trimmen lässt und siehe da, die Webseite ändert sich überhaupt nicht.
Eigentlich soll sich auch nur erst mal die Farbe eines DIV-Elements ändern.
Hier einfach mal meine HTML-Datei:
und die CSS:
Jetzt ist die Frage warum das nicht funktioniert "min-device-width" nimmt ja die Größe des Browser, nicht wirklich die des Gerätes (wäre auf meinem PC ja dementsprechend größer).
Selbst mit Größen die definitiv zwischen 320 und 480px liegen ändert sich nichts.
Wie testet ihr sowas und was mach ich denn falsch?
Danke schon mal für eure Hilfe.
PS: warum zoomen sowohl iPhone als auch Browser an den rechten äußeren Rand des Buttons?
Hallo Forum,
ich habe mir eine ganz simple CSS-Datei geschrieben die einfach nur eine unterschiedliche Darstellung auf meinem iPhone und PC ermöglichen soll.
Das klappt auch wunderbar, nur testen lässt sich das sehr schlecht: Dateien auf Webspace laden, Webseite am iPhone aufrufen. Also hab ich mir eine Chrome-Extension (http://goo.gl/hUrx5) geladen die den Browser auf bestimmte Größen trimmen lässt und siehe da, die Webseite ändert sich überhaupt nicht.
Eigentlich soll sich auch nur erst mal die Farbe eines DIV-Elements ändern.
Hier einfach mal meine HTML-Datei:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>myPlace</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div id="top-menu">
<div class="le-button"></div>
</div>
</body>
</html>und die CSS:
Code:
body {
margin: 0px;
background-color: black;
}
p {
font-size: 22px;
font-weight: bold;
margin: 0px;
}
#top-menu {
width: 100%;
height: 110px;
padding: 10px;
}
.le-button {
width: 250px;
height: 110px;
border-radius: 5px;
background-color: red;
float: right;
}
@media only screen and (min-device-width: 320px) and (max-device-width: 479px) {
/* Hier der CSS Code für Smartphones wie z.B. iPhone, Android, WebOS, Windows Phone 7 Geräte o.Ä. */
#top-menu {
background-color: yellow;
}
}
/* Computer und Tablet CSS */
@media only screen and (min-device-width: 800px) {
/* Hier der CSS-Code für Tablets und Computer ab einer mindest Bildschirm Weite von 800 Pixeln */
#top-menu {
background-color: orange;
}
}Jetzt ist die Frage warum das nicht funktioniert "min-device-width" nimmt ja die Größe des Browser, nicht wirklich die des Gerätes (wäre auf meinem PC ja dementsprechend größer).
Selbst mit Größen die definitiv zwischen 320 und 480px liegen ändert sich nichts.
Wie testet ihr sowas und was mach ich denn falsch?
Danke schon mal für eure Hilfe.
PS: warum zoomen sowohl iPhone als auch Browser an den rechten äußeren Rand des Buttons?
