css media queries für Foramte gesucht

[jumbo125]

Sehr geehrte Forum User

nach langen googlen wende ich mich wiedermal an euch.
Ich versuche eine Seite Mobile tauglich zu gestalten.

Nun benötige ich die Media infos für:

1 Nur Iphone 3g Portrait// Wenn möglich ein media queries, welches nicht nur das Iphone sondern alle mobile geräte von einer Spanne 320px bis 640px abdeckt- ersparrt punkt 5
2 Nur Iphone 3G Landscape // Wenn möglich ein media queries, welches nicht nur das Iphone sondern alle mobile geräte von einer Spanne 480px bis 960px abdeckt

3 Nur Iphone 4 Portrait// Wenn möglich ein media queries, welches nicht nur das Iphone sondern alle mobile geräte von einer Spanne 640px bis 950px abdeckt- ersparrt punkt 6
4 Nur Iphone 4 Landscape// Wenn möglich ein media queries, welches nicht nur das Iphone sondern alle mobile geräte von einer Spanne 960px bis 640px abdeckt

5 ein von 320px bis 640px Portriat landscape //Diese gelten den anderen Mobilen Geräten
6 ein von 640 bis 950 Portrait Landscape //ebenfalls

7 Ipad portrait und ipad landscape


Vermutlich werden einige von euch schreiben, dass ich googeln sollte, ABER im google tauchen mehrere verschiedene auf. Manche funktionieren nicht, manche übernimmt mein Iphone aber keiner der responsive simulatoren.

Es wäre super wenn ihr mir eure schreiben könntet, von denen er weißt,d ass sie funktionieren.

danke

 

[Cheffchen]

HAllo,

manche übernimmt mein Iphone aber keiner der responsive simulatoren.

und?
was haben miese "responsive simulatoren" mit deiner Seite zu tun?
Wenn dein Phone das macht ist doch schick was möchtest noch?
wieso manche simulatoren nicht funktionieren leigt vielleicht an max-device-width oder max-width verwendet wurde.

Und was soll die fragestellung

1 Nur Iphone 3g Portrait// Wenn möglich ein media queries, welches nicht nur das Iphone

was nun?
eigentlich müsste die antwort heisen "ja, nein".

schau dir die eine seite an, da findest alles, mehr brauchst nicht, musst halt entscheiden ob max-device-width oder max-width (ich mach nur max-width): Media Queries for Standard Devices | CSS-Tricks

den rest kannst dir ableiten.

Du möchtest echt Portrait/Landscape unterscheidung?
das möchte ich dann gerne sehe.

Cheffchen

 

[jumbo125]

HAllo,

Du möchtest echt Portrait/Landscape unterscheidung?
das möchte ich dann gerne sehe.

Cheffchen

ja weshalb nicht?

der bereich wird dann anders gefloatet

 

[Cheffchen]

Hallo,

möchte dich ja nicht bremsen.
da gibts halt ein haufen überschneidungen zwischen 1 <> 2 und 3<>4 und 5<>6 wo sehr aufpassen musst das da nicht ein paar durch rutschen.

Ob 480px Portrait oder Landscape sind währe mir wurst aber wie gesagt möchte dich nicht bremsen :O).

Cheffchen

 

[jumbo125]

Nun stehe ich vor einem prProblemen
mein Wunsch wäre es dass das alle Geräte welche min 640px das gleiche Layout haben
daher gebe ich Media and screen and (min-device-width) and orientantion(Portrait)

das funktioniert,ABER nicht beim iPhone...

grund dafür das iPhone hat eine Größe von 320px, da jedoch 2px in einen teingestopft werden, geht man von 640px aus. Fazit:
1. bleibe ich mei meinem media wird das iPhone nicht miteinbezogen
2. Schreibe ich 320px. Anstatt 640px wird das iPhone 4 miteinbeziehen, ABER die Formatierung passt nicht bei den Geräten welche eine 320px Auflösung haben, da sie für 640 ausgelegt ist
3. Schreibe ich die r-webkit-pixel-ratio 2 Variante wird das iPhone 4 miteinbezohen aber nicht die 640px geräte
4. Muss ich jetzt eine Datei mit media 640px schreiben und eine idente mit ratio-2.
Danke

 

[Cheffchen]

Hallo,

sieh link oben der letzt media query, mit komma getrennt ist "oder" damit kannst dein 4 sparen da eins für mehr schreiben kannst.

Cheffchen

 

[Tronjer]

Das iPhone 3G zu targeten ist sogar relativ einfach, weil kein anderes Device mehr eine so geringe Auflösung besitzt, und zur Unterscheidung unterschiedlicher Browser / OS bietet sich zusätzlich noch der Useragentstring an.

Ich war vor zwei Monaten erstmalig mit der Aufgabe konfrontiert, eine mobile Seite zu bauen, die skalierbare SVGs enthält und auf iOS, Android und Windows 8 möglichst identisch aussehen sollte. Auf allen gängigen Geräten, vom kleinen iPhone 3GS bis zu den großen Nexus Galaxies und zusätzlich noch in sämtlichen mobilen Browsern. Daran habe ich auch mehrere Tage gesessen und etliche Stunden bei Google zugebracht. Es gibt das notwendige Material dort, alleine stackoverflow ist voll nützlicher Tipps.

Wenn du nicht fündig geworden ist, liegt es vielleicht daran, dass für dein Problem, ebenso wie für meins, keine out-of-the-box Lösung existiert, die sich mit minimalem Zeitaufwand umsetzen lässt. Also try harder oder stelle die Aufgabe in die Jobbörse.