Antworten auf deine Fragen:
Neues Thema erstellen

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

nostra87

Nicht mehr ganz neu hier

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:

PHP:
<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

Posting-Frequenz: 14µHz

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

Aktives Mitglied

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.





 
Zuletzt bearbeitet:
M

mistelwong

Guest

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

Aktives Mitglied

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

Nicht mehr ganz neu hier

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:

PHP:
<meta name = "viewport" content = "width = 400, user-scalable = yes, initial-scale = 0.7, maximum-scale = 0.7"/>
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.614
Beiträge
1.538.351
Mitglieder
67.525
Neuestes Mitglied
mgtaucher
Oben