[Javascript] Html Seite prüft Auflösungen - Für Smartphone und Tablets

[nostra87]

Ich hoffe der Titel ist aussagekräftig genug.

Mein Problem:

Meine index.html Seite soll die Auflösung der Mobilen Geräte (wie Smartphone und Tablets) erfassen sich und anschließend mit einer anderen Seite verlinken. Sofern eine große Auflösung festgestellt wird, erfolgt die "klassische Seite" anstatt der "mobilen Version".

Das habe ich bisher so lösen können:

<script type="text/javascript">
if (screen.width < 800) {
window.location.href = 'mobileseite.html';
}
else if (screen.width > 800) {
window.location.href = 'normaleseite.html';
}
</script>

Nun, das eigentliche Problem, zum Einen spielt das iPhone und das iPad nicht mit und zum Anderen, habe ich keine Ahnung, wie ich das mit den Grafiken löse. Da jedes Mobile Gerät verschiedene Auflösungen aufweist. Ich wäre über einige wertvolle Tipps sehr dankbar.

 

[Duddle]

AW: [Javascript] Html Seite prüft Auflösungen - Für Smartphone und Tablets

Mit diesem Problem befasst sich das Prinzip "Responsive Design"; wenn du danach googlest findest du mehrere Artikel mit Frameworks und anderen Hilfsmitteln um es zu lösen. So weit ich weiß gibt es dabei noch keinen de facto Marktführer, deshalb solltest du selbst mal in ein paar der folgend verlinkten Frameworks ausprobieren.

http://designshack.net/articles/css...ve-css-frameworks-and-boilerplates-explained/
http://webexpedition18.com/articles/responsive-css-frameworks/


Duddle

 

[AndreasChris]

AW: [Javascript] Html Seite prüft Auflösungen - Für Smartphone und Tablets

Zu Responsive Webdesign wurde ja bereits eine PSD-Tutorials Workshop-DVD herausgegeben. Auch Online sind schon enige Trainings verfügbar (). Schaus dir mal an. Ich denke das hilft dir weiter.

 

[mistelwong]

AW: [Javascript] Html Seite prüft Auflösungen - Für Smartphone und Tablets

gern verwendet wird auch das neue html5 Boilerplate
Hier wird das Problem mit media querys in der CSS gelöst.

 

[lachender_engel]

AW: [Javascript] Html Seite prüft Auflösungen - Für Smartphone und Tablets

Ich habe mich mit dem Thema auch neu befasst und da hat mir das Tutorial von Pascal "Kaffee am Meer" sehr geholfen. Mein Tipp: Investiere ein paar Punkte und lade Dir die vier Teile runter.

 

[nostra87]

AW: [Javascript] Html Seite prüft Auflösungen - Für Smartphone und Tablets

_
@Duddle, @ACWebmaster, @mistelwong, @lachender_engel

Danke!

Entschieden habe ich mich für das Script, welches nun die mobilen Geräte ermittelt bzw. prüft:

http://detectmobilebrowsers.com/

Arbeiten tu ich mit einigen Meta Tags wie:

<meta name = "viewport" content = "width = 400, user-scalable = yes, initial-scale = 0.7, maximum-scale = 0.7"/>