Website iOS/android fit machen

[bifi]

Halli hallo ihr Lieben,

ich habe eine kleine Website bei der ich ein paar Fotos ausstelle.
Was Browser angeht sieht das in jedem gut aus, nur die Funktionalität macht mir bei Touch-Geräten Probleme.

- Ich habe zum einen eine kleine Slideshow auf der Startseite die sich auch mit dem Finger sliden lässt, aber dabei wird AUCH zur Seite gescrollt.

- Der Menüpunkt "Portfolio" ist ein Dummy der bei Mousehover 3 Menüpunkte zeigt. Bei android öffnet sich das Menü per tap, bei iOS passiert manchmal nichts, mal geht es(aber schließt sich nicht wenn man woanders hin drückt wie bei android).

- Mobile Browser zeigen links und rechts der Seite immer ein Stück des Hintergrunds der so nur unnötig viel Platz wegnimmt. Ich würde das gerne auf mobilen Browsern ohne diesen Rand darstellen.
// Fix dafür gefunden, aber jetzt zoomt der Browser standardmäßig auf eine 100% Ansicht - das ist zu viel :-/
Lösung war: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.5, user-scalable=yes" />

Das Problemkind: http://www.co0n.de/

Ich bitte um Hilfe obige Probleme zu lösen :-/
Mit freundlichen Grüßen,
Co0n

[mindraper]

hi

1)
die seite ist mit fixen angaben der breiten/höhen definiert (css). dass mobile browser dabei "herauszoomen" ist kein wunder, schließlich passt eine 700px breite seite nicht in einen 320px (portrait) bzw. 480px (landscape) breiten viewport. stichworte zur lösung: media-queries und/oder relative breitenangaben.

2)
touch-devices kennen (logischerweise) keinen :hover-status. für dieses problem gibt es unterschiedliche lösungsansätze, diese reichen von einem <select>-element über :target bis zum einsatz von javascript. welches schweinerl hättens denn gern?

3)
das bei einem swipe-event auf deinem slider nach links/rechts gescrollt wird liegt daran, dass das standard-verhalten von mobilen browsern bei einem swipe ein bewegen der seite ist. dafür müsstes du im entsprechenden funktionsaufruf "event.preventDefault()" ausführen lassen. dummerweise besteht dein slider aus einem jquery-plugin. das bedeutet, dass dir damit vermutlich keiner helfen kann, der keine lust hat, sich durch den (minified + obfusciated) plugin-code zu arbeiten. ich vermute mal, dass hat niemand. entweder nimmst du solange ein anderes plugin bis du eines findest das wie gewünscht funktioniert oder du schreibst dir einen eigenen slider oder du lässt dir von jemandem einen slider basteln (was vermutlich etwas kosten wird).

gruß

[bifi]

Zitat von mindraper

hi

1)
die seite ist mit fixen angaben der breiten/höhen definiert (css). dass mobile browser dabei "herauszoomen" ist kein wunder, schließlich passt eine 700px breite seite nicht in einen 320px (portrait) bzw. 480px (landscape) breiten viewport. stichworte zur lösung: media-queries und/oder relative breitenangaben.

Für 480px breite devices ist die lösung relativ einfach durch @media im css, das problem ist eher dass durch Android viele verschieden breite Geräte auf dem Markt sind.
auf dem iPhone sieht es jetzt z.B. so aus wie es soll, die Schrift wird ja dank em mit skaliert sodass alles gut lesbar ist.
Ein Galaxy s3 z.B. hat aber eine Breite von 720px. obwohl meine Seite nur 20px schmaler ist wird rechts und links ein deutlich größerer Rand dargestellt.

Anders gefragt: wie kann ich herausfinden ob es sich um iOS/Android geräte handelt ohne etwas unzuverlässiges wie ne devicebreite abzufragen?

Zitat von mindraper

2)
touch-devices kennen (logischerweise) keinen :hover-status. für dieses problem gibt es unterschiedliche lösungsansätze, diese reichen von einem <select>-element über :target bis zum einsatz von javascript. welches schweinerl hättens denn gern?

So simpel wie möglich am liebsten, bin kein großer JS Freund

Zitat von mindraper

3)
das bei einem swipe-event auf deinem slider nach links/rechts gescrollt wird liegt daran, dass das standard-verhalten von mobilen browsern bei einem swipe ein bewegen der seite ist. dafür müsstes du im entsprechenden funktionsaufruf "event.preventDefault()" ausführen lassen. dummerweise besteht dein slider aus einem jquery-plugin. das bedeutet, dass dir damit vermutlich keiner helfen kann, der keine lust hat, sich durch den (minified + obfusciated) plugin-code zu arbeiten. ich vermute mal, dass hat niemand. entweder nimmst du solange ein anderes plugin bis du eines findest das wie gewünscht funktioniert oder du schreibst dir einen eigenen slider oder du lässt dir von jemandem einen slider basteln (was vermutlich etwas kosten wird).

gruß

Dann muss ich es durch die layoutbreite regeln, wenn man nicht zur seite scrollen kann wird auch nicht gescrollt ;-)

Danke für deine Hilfe soweit!

[mindraper]

hi

Zitat von bifi

Für 480px breite devices ist die lösung relativ einfach durch @media im css, das problem ist eher dass durch Android viele verschieden breite Geräte auf dem Markt sind.

[gekürzt]

Ein Galaxy s3 z.B. hat aber eine Breite von 720px. obwohl meine Seite nur 20px schmaler ist wird rechts und links ein deutlich größerer Rand dargestellt.

Anders gefragt: wie kann ich herausfinden ob es sich um iOS/Android geräte handelt ohne etwas unzuverlässiges wie ne devicebreite abzufragen?

ja und nein. zunächst einmal: ja, für 480px breite devices ist es zur zeit einfach. aber das bedeutet ja, dass das wahre problem nur "auf die lange bank" geschoben wird. wenn in einem halben jahr ein neues gerät (oder gar eine gruppe davon) auf den markt kommt, die sämtlich andere seitenverhältnisse haben und deine seite dadurch wieder nicht passt, müsstest du deine abmessungen wieder ändern. wieso also nicht gleich fluid + css-queries? dann wäre das wahre problem behandelt, nicht nur hier und da nachgebessert.

ob es sich um ein android-gerät handelt, könntest du z. b. via javascript am useragent-string ablesen. das hat vor- und auch (teils immense) nachteile: solange der user seinen string nicht ändert, ist alles in butter. ändert der user aber seinen useragent-string, bist du ziemlich aufgeschmissen. durch die schon erwähnten css-queries + fluid-design könnt's dir wurscht sein.

gruß