Um schreiben oder kommentieren zu können, benötigen Sie ein Benutzerkonto.
Sie haben schon ein Benutzerkonto? Melden Sie sich hier an.
Jetzt anmeldenHier können Sie ein neues Benutzerkonto erstellen.
Neues Benutzerkonto erstellen
Hallo!
Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.
Hallo Dunkelangst,
klar das geht ganz leicht mit Responsivem Design auf Basis von Media Queries. Google mal nach den beiden Begriffen, da findest Du bestimmt genügend Material um Dich einzulesen.
Hier ein schneller nicht getesteter Lösungsansatz zu Deiner konkreten Frage.
Innerhalb des <head> Bereichs Deiner Seite fügst Du folgenden Code ein:
<meta name="viewport" content="width=device-width">
Dadurch werden mobile Browser angewiesen, die Seite nicht zu skalieren, wie sie das standardmäßig bei Websites machen, die nicht für den mobilen Einsatz optimiert sind.
In Deinem CSS fügst Du ein Media Query ein wie zB:
body {
background: url(images/imagename.jpg);
}
@media only screen and (max-width: 500px) {
body {
background-image: none;
background-color: #000;
}
}
Soll heißen, dass unter einer Breite von 500px kein Hintergrundbild angezeigt wird. Dadurch wird es auch gar nicht erst geladen.
Der große Vorteil von responsivem Design ist, dass Du im Browser am Desktop testen kannst. Die Angaben beziehen sich auf die Breite des Browserfensters. Responsive Seiten ändern also ihr Layout wenn man die Größe des Browserfensters verändert.
Beispiele: http://wordpress.org/themes/search.php?q=responsive
Wenn Du damit anfängst dann musst Du aber eigentlich den Aufwand betreiben und Deine ganze Seite responsive machen (was aber in Zeiten mobiler Geräte ohnehin sinnvoll ist). Bei dem schlichten Design Deiner Seite wäre der Aufwand gar nicht so groß. Auf mobilen Geräten den Hintergrund raus, den Header verkleinern, die Sidebar anstatt rechtsbündig nach unten verschieben, die Breite anstatt fix in Prozent angeben. Damit hättest Du wahrscheinlich schon 80% geschafft. Der Rest ist Detail-Kosmetik.
Wenn Du das vorerst nicht machen möchtest, dann würde mir noch folgende Lösung einfallen:
Per CSS gar keinen Hintergrund laden. Mit jQuery überprüfen ob es sich um ein mobiles Gerät handelt (Script dazu: http://detectmobilebrowsers.com). Wenn nicht, das Hintergrundbild nachladen. Sind nur ein paar Zeilen Code.
Peter
Hi Peter!
Vielen Dank für deine Antwort! An sich funktioniert dein Code schon einmal, nur nicht so, dass er den Anforderungen gerecht wird:
in deinem Code-Beispiel gehst du davon aus, dass die Grafik bei einer Display Breite von 500px oder weniger nicht geladen werden soll. Das iPhone hat eine Auflösung von 1136 x 640 Pixel; bei den gängigen Android Geräten sieht das ähnlich aus, von Tablet-Computern ganz zu schweigen (iPad mini 1136 x 640 Pixel bei 326 ppi).
Was ich damit sagen möchte:
bei einem Desktop Computer mit einer Auflösung von 800x600px soll das Hintergrundbild geladen werden, bei Mobilen Geräten mit einer durchaus höheren Auflösung nicht.
Jetzt schaue ich mir deinen anderen Vorschlag an:
Wenn Du das vorerst nicht machen möchtest, dann würde mir noch folgende Lösung einfallen:
Per CSS gar keinen Hintergrund laden. Mit jQuery überprüfen ob es sich um ein mobiles Gerät handelt (Script dazu: http://detectmobilebrowsers.com). Wenn nicht, das Hintergrundbild nachladen. Sind nur ein paar Zeilen Code.
Melde mich, wenn ich näheres probiert habe!
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!
