• Das kreative Thema des Monats Oktober wird vor allem diejenigen unter Euch besonders ansprechen, denen Do-it-yourself quasi im Blut liegt. Zeigt uns Eure Improvisationskünste oder fotografiert, was andere Leute sich so im Alltag zusammengestrickt haben. --> Zum Mitmachen bitte hier klicken

Mobile Version für Homepage

done3000

done3000

Kaiser Wilhelm
Registriert
06.01.14
Beiträge
176
Hallo,

ich habe eine Homepage gebastelt. Diese funktioniert in allen gängigen Desktopbrowsern soweit ganz gut.
Leider trifft das nicht ganz auf die mobilen Browser zu.
Nun dachte ich mir, dass ich eine extra mobile Version dazu bastle, die dann unter m.homepage.de o.ä. automatisch erscheint, wenn man z.B. mit dem iPhone auf homepage.de geht.

Hat da jemand schon Erfahrungen gesammelt?
 
Auf eine Subdomain würde ich nicht gehen - mögen teilweise Suchmaschinen nicht.
Würde schlicht eine Browserweiche einsetzen die dann ein entsprechendes Theme läd - so wie es ua. Blogs machen (mal als gängigstes Beispiel)
 
  • Like
Reaktionen: done3000
Ok, das scheint mir auch eine bessere Lösung zu sein. Kannte ich bisher nicht. Danke :)

Hab das mal schnell gegoogelt.
Das wäre dann etwa so:

<!--[if IE]>
<style type="text/css">@import url(ie.css);</style>
<![endif]-->

Dann eben für mobilen Safari/Chrome etc. statt IE und dann eben ein passendes css einbinden oder?
 
genau.

Habe das abfragen von Browserinfos via JS nicht mehr so im Hinterkopf (mache seit 6Jahren primär technische, weniger softwareseitige Arbeiten). Meine mich aber zu entsinnen, dass du nochnichtmal für Browser XYZ ein Theme anlegen musst da soweit ich mich entsinne mobile Browser eine Info mitliefern "Hey ich bin mobile".

Da ich mir gerade nebenbei "World of Warplanes" herunterlade ist die Leitung gut ausgelastet dass ich besser nicht nach der Lösung Google :P
 
Die einfachste und vernünftige Lösung ist der Weg über Media Queries im CSS, du kannst Displaygrößen und -typen abfragen und demnentsprechendes CSS ausliefern. Für ein optimales Ergebnis sollte aber bereits das Markup darauf angepasst sein.

Beispiele mit Media Queries: Klick mich
Infos zur Funktionsweise: Klick mich
 
  • Like
Reaktionen: simmac, done3000 und Nathea
Oha! Das wird dann aber schon ziemlich aufwendig, wenn ich alle möglichen Displaygrößen verschieden designen soll.
Aber theoretisch kann ich ja trotzdem ein mobiles Design verwenden?
 
Der schönere Weg sind die Media Queries. Bei einer extra Seite musst du den Content doppelt pflegen, musst einige Sachen bezüglich Google beachten (z.B. Duplicate content).

Du brauchst ja nicht sämtliche Displaygrößen nehmen. Auf Tablets lässt sich eine nicht angepasste Seite meistens noch ziemlich gut benutzen, von daher kannst du die bei dir ignorieren. Für die Smartphones nimmst du einen Bereich der passt. Musst mal nach den gängigen Viewports (Displaygrößen, -Formate etc.) gucken.

Hier habe ich z.B. auch nur mobile angepasst: http://www.duenenschloss-ferienwohnung.de/home.html
 
Ich denke so werde ich das auch machen.

Danke euch zwei!
 
mkr* schrieb:
Der schönere Weg sind die Media Queries. Bei einer extra Seite musst du den Content doppelt pflegen, musst einige Sachen bezüglich Google beachten (z.B. Duplicate content).

Du brauchst ja nicht sämtliche Displaygrößen nehmen. Auf Tablets lässt sich eine nicht angepasste Seite meistens noch ziemlich gut benutzen, von daher kannst du die bei dir ignorieren. Für die Smartphones nimmst du einen Bereich der passt. Musst mal nach den gängigen Viewports (Displaygrößen, -Formate etc.) gucken.

Hier habe ich z.B. auch nur mobile angepasst: http://www.duenenschloss-ferienwohnung.de/home.html
Zum Vergrößern anklicken....

Hallo mkr,

ich habe das bei meiner Seite auch so gemacht. Funktioniert super - bis aufs IPhone 5. Da sollen angeblich die Bilder völlig in die Länge gezerrt sein wie in einem Spiegelkabinett. Hast du (oder gern auch jemand anderer) eine Idee, woran das liegen könnte. Denn in älteren IPhones hab ich das Problem nicht.

Danke schon mal im Voraus
 
Oder du guckst dir mal Frameworks wie Bootstrap (www.getbootstrap.com) an. Die bringen sogenannte responsive Elemente schon mit und sind hoch anpassbar.
 
Barbella schrieb:
Hallo mkr,

ich habe das bei meiner Seite auch so gemacht. Funktioniert super - bis aufs IPhone 5. Da sollen angeblich die Bilder völlig in die Länge gezerrt sein wie in einem Spiegelkabinett. Hast du (oder gern auch jemand anderer) eine Idee, woran das liegen könnte. Denn in älteren IPhones hab ich das Problem nicht.

Danke schon mal im Voraus
Zum Vergrößern anklicken....
Hallo Barbella,

hast du einen Link zu der Seite? Dann schaue ich mir das mal an:)
 
Wenn du XCode hast dann hat dies einen Hardware-Emulator für iOS devices (fast aller Generationen) sowie Macs an board. Dort kammst du dir selber die Seite auf den entsprechenden Geräten darstellen lassen (sowohl Landscape als auch Portrait Mode).

Barbella schrieb:
Hallo mkr,

der Link lautet: http://www.hochzeit-allinclusive.at

Danke, dass du dir das mal ansiehst. Kanns selber nur auf meinem Smartphone anschauen, da ich selbst kein Iphone hab - da passt auch alles. Ich konnte es mir grad mal auf einem älteren Iphone ansehen - und da war auch alles okay. :confused:
Zum Vergrößern anklicken....
 
Hallo,

XCode ist aber nur was für Apple - wenn ich mich nicht verlesen habe - oder? Und ich hab leider keinen... :oops:

Aber danke für die nett gemeinte Hilfe.
 
Die Bilder sehen auf meinem 5S okay aus, kann da keine Verzerrung erkennen. Nur unter Impressionen macht die Lightbox im Querformat Probleme (Bild ist winzig im Querformat.) Aber hochkant passt alles.
 
smoe schrieb:
Die Bilder sehen auf meinem 5S okay aus, kann da keine Verzerrung erkennen. Nur unter Impressionen macht die Lightbox im Querformat Probleme (Bild ist winzig im Querformat.) Aber hochkant passt alles.
Zum Vergrößern anklicken....

Vielen lieben Dank smoe!
Dann muss ich mit meiner Bekannten wohl nochmal ein Wörtchen reden, was sie da verzerrt sieht. ;)

Hast du vielleicht eine Idee, wie ich das mit der Lightbox im Querformat lösen könnte?
 
Viele Lightboxen verhalten sich leider ganz schrecklich auf mobilen Geräten. Wenns ohne Aufwand geht würde ich mal eine andere Lightbox versuchen.

Oder mal ein bisschen mit Schriftgröße und Position der Lightbox-Beschriftung und dem Schließen-Knopf spielen, das sind die Elemente die den Platz wegnehmen...
 
  • Like
Reaktionen: Barbella
Ok ich war automatisch davon ausgegangen dass du auf einem Mac entwickelst. Sorry. Für Windows kenne ich keine entsprechende Software / Emulator. Und ja, XCode ist nur für OSX vorgesehen.

Barbella schrieb:
Hallo,

XCode ist aber nur was für Apple - wenn ich mich nicht verlesen habe - oder? Und ich hab leider keinen... :oops:

Aber danke für die nett gemeinte Hilfe.
Zum Vergrößern anklicken....
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
2003-2026 Apfeltalk | Made on a Mac
Oben Unten