Kennt sich jemand mit CSS aus? Media Queries?

[Rak]

Hi, bzgl. "media queries" hab ich mir zwar was durchgelesen, verstehe es als Anfänger in diesem Bereich leider aber immer noch nicht so ganz.

Was ich will:

Auf meinem S6 edge möchte ich die Schriftart einer einzelnen Webseite nur im Porträtmodus größer haben als mit anderen Geräten, auch Desktop bzw. im Landschaftsmodus.

Bisher habe ich das so unterschieden:

@media(max-width: 1440px) and (orientation: portrait) {
....
]

Das Display des S6 edge hat ja eine Breite von 1440px. Alles war gut - bis ich nun ein Tablet Tab S2 bekommen habe, welches im Porträtmodus leider auch die vergrößerte Schrift anzeigt (Display hat 1536px).

Hab ich schon nicht ganz kapiert. Beim Probieren hab ich festgestellt, dass ab einer max-width von 980px bei beiden Geräten leider die größere Schriftart gezeigt wird.

Wie kann ich diese beiden Geräte unterscheiden lassen?

 

[PJF16]

Vielleicht etwas unsauber, aber wenn du ab einer min-width von 1441 die Schrift wieder kleiner machst (nach dem max-width Query): Funktioniert es dann?

 

[Rak]

@PJF16 Nein, das ändert nichts, nochmal probiert. Zumal "min-width: 1441px" ja sowieso zum "Normalfall" gehört, finde ich auch logisch.

Wie gesagt, habe ich da mal rumprobiert. Setze ich in meinem Code oben die Breite immer weiter runter, ist genau bei 980px (warum auch immer) die Grenze:

Setze ich
"@media(max-width: 980px) and (orientation: portrait)"

bekomme ich bei beiden Geräten den Fall mit der größeren Schrift angezeigt. (Bei Setzen von max-width: 979px die normale kleine Schrift).

Irgendwie scheint die Breite bei beiden Geräten gleich zu sein...?

 

[PJF16]

Zumal "min-width: 1441px" ja sowieso zum "Normalfall" gehört, finde ich auch logisch.

Ja, eh. Aber ich hatte mit dem Tag schon sehr viele komische Phänomene.

Was zeigt z. B. die App Droid Hardware-Info als Auflösung an? Auch die 1536? Nicht das vom System z. B. nur 1440 Pixel reported werden und dadurch der Fehler zu Stande kommt.

 

[Rak]

Was zeigt z. B. die App Droid Hardware-Info als Auflösung an? Auch die 1536?

Ja, auch 1536px.

 

[PJF16]

Chrome reportet da anscheinend etwas anderes um das Ganze optimaler darzustellen. Versuch's z. B. mal mit der Seite Meine Bildschirmauflösung / Bildschirmgröße anzeigen, herausfinden und ändern. (Javascript muss aktiviert sein natürlich)

Das ist wahrscheinlich des Rätsels Lösung.

 

[Rak]

@PJF16 Interessant. Hab den dort genannten JavaScript-Code mal eingesetzt.

- Beim S6 edge bekomme ich angezeigt: 360 x 640
- Bei Tablet Tab S2 bekomme ich: 768 x 1024

In Chrome, Firefox und Opera getestet.

Das könnte eine Hilfe sein, wenn aber nicht exakt bei einer "max-width: 979" und "max-width: 980"bei beiden dieselbe unterschiedliche Ansicht angezeigt wird.


Hab es jetzt mal hiermit versucht:

@media(max-device-width: 1440px) and (orientation: portrait) {
...
}

Leider ändert das am Tablet auch nichts. Trotz Breite von 1536px wird es genauso angezeigt wie am S6 edge.
[doublepost=1484594279,1484593519][/doublepost]Hmm, hab nochmal was gelesen (auch wenn für iPhone - scheint zu passen):

Many tablets and mobile devices don’t always have 1 device pixel per CSS pixel. The iPhone 4, for example, has 2 device pixels per CSS pixel. For reference, you should know that the iPhone 4 has a regular screen layout viewport of 640×960. This means that, in this example, the device-width of the iPhone4 is 320×480. This is the case because Apple realizes that not every website is built responsively (shame on them) and tries to please everyone by having around 980px width to accommodate the desktop view of the website. This means, that if there is no meta viewport tag in place, the iPhone4 will take your website, render it as if it were 980px wide, squish it into a 320px display, and as a result, would be zoomed out to the user.

Ich muss wohl irgendwie einen viewport definieren in den Metatags... Kapiere ich im Moment jedoch noch nicht ...
[doublepost=1484595886][/doublepost]@PJF16 Jetzt hab ich's

1. Viewport setzen:

<meta name="viewport" content="width=device-width,initial-scale=1" />

2. Dann nicht per Pixel, sondern per em unterscheiden:

@media(max-device-width: 30em) and (orientation: portrait) {
...
}

Für Profis vermutlich lächerlich , aber ich hab es jetzt so zu 30% verstanden ... Hauptsache funzt ...

 

[PJF16]

Danke für das Posten der Lösung. Hab in meinem Beruf und Studium auch nur am Rande mit Webdesign zu tun und brauche das eher selten.

 

[Rak]

Genauso ist das bei mir ...

Und das jetzt ist nur für meine private Seite mit einer Sammlung von Lesezeichen-Links gewesen, die ich immer mal schnell an jedem (auch fremden) Gerät mit jedem Browser in 3 Sekunden erreichen will. Jetzt hat alles auf Phone, Tablet und Desktop jeweils eine bequeme klickbare/tatschbare Größe