Media Query ausschließlich für Desktop

[KasselJulian]

Hi,

mir ist klar, dass ich mit

@media only screen and (min-width: 1025px)

ausschließlich Desktops anspreche, doch möchte ich auch jene Desktops und Laptops ansprechen, die auch eine Browser-Größe kleiner als 1025px haben.
Gitb es eine Möglichkeit z.B. zu sagen für screens mit min-width:768px and not (min-device-width:768px and max-device-width:1024px)?
Damit sage ich für alle mit Browsergröße ab 768px (Desktop und Laptops) aber nicht für Tablets (die haben ja auch 768px)?

Cheers

 

[Myhar]

AW: Media Query ausschließlich für Desktop

Du hast den Sinn von mediaqueries nicht verstanden. Du kannst nicht "Desktop", "Smartphone", "Tablet" ansprechen, da es hier ein zu großes Spektrum an Geräten gibt. Was ist, wenn ich meinen Desktopbrowser nicht auf Vollbild laufen habe, was ist, wenn in einem Jahr die Tablets Full-HD unterstützen, etc.?
Der Sinn von Mediaqueries ist vielmehr folgender: Du kannst ermitteln, welche Features, bzw. Eigenschaften ein Browser (Nutzer) hat und ausgehend davon wird die passende Seite angezeigt.

 

[KasselJulian]

AW: Media Query ausschließlich für Desktop

Habe ich doch? Ich ermittle ja anhand der Browser- bzw. Device-Größe. Meine einzige Frage ich ob ich eine negative Frage stellen kann: Ist Browsergröße über 768px und nicht Device-Größe max 1024px

 

[Myhar]

AW: Media Query ausschließlich für Desktop

Deine Fragestellung lässt auf etwas anderes schließen. Du schreibst, dass du ausschließlich Desktops ansprechen willst und das ist nicht der Sinn von mediaqueries. Möchtest du jedes Device, egal ob Tablet, Smartphone, Desktop, TV, etc. ansprechen, welches in einer gewissen Browsergröße liegt, dann vermisst deine Fragestellung diesen Aspekt.
Aber du kannst media-queries natürlich so vergeben, wie du sie brauchst

@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px){
 /*Das hier ist ein valides Mediaquery. Welche Attribute möglich sind, lässt sich innerhalb kürzester Zeit googlen*/
}

 

[KasselJulian]

AW: Media Query ausschließlich für Desktop

Der Query ergibt für mich keinen Sinn.
Du sprichst damit alle von einer Breite von min. 520px bis 699px und von min 1151px an.
Damit ist der Zustand auch bei großen Mobilgeräten true. Und was ist mit einer Browserbreite von 728px? Das wird ignoriert.
Nochmal: Ich möchte alle mit einer Browserbreite ab 768px ansprechen, jedoch nicht wenn die maximale Breite 1024px ist (Tablets)

 

[Myhar]

AW: Media Query ausschließlich für Desktop

Ich werde mir nicht die Mühe machen, für dich das korrekte mediaquery zusammen zu stellen, etwas Eigeninitiative erwarte ich mir schon. Ansonsten ist kein Lerneffekt gegeben und du hast bei einem ähnlichen Problem keine Ahnung, wie du es lösen sollst. Mein Beispiel soll lediglich demonstrieren, wie du mehrere Anweisungen in einem mediaqueries kombinierst.
Übrigens: "jedoch nicht wenn die maximale Breite 1024px ist (Tablets)" ist immer noch die falsche Herangehensweise, es gibt auch Desktops, bei denen die maximale Breite 1024 Pixel ist.

 

[KasselJulian]

AW: Media Query ausschließlich für Desktop

Ja aber das nehme ich in kauf. Hörmal, ich meine das doch nicht böse aber ich verstehe nicht wie du dich jetzt auf stur stellst. Ich habe Eigeninitiative erbracht. Wir drehen uns hier im Kreis weil meine Frage von Anfang an war, wie ich eine Aussage negativ formuliere (Query). Du hast Beispiele gebracht die das nicht beinhalten und erwartest von mir Eigeninitiative. Ich hab doch nichtmal einen Ansatz bekommen!?

 

[MyBad]

AW: Media Query ausschließlich für Desktop

Mit Media Queries alleine wird das nicht klappen. Da musst du dann zusätzlich per PHP, JS oder htaccess auf die einzelnen Geräte abfragen. Bei der Vielzahl der Geräte kein Vergnügen. Aber anders wirst du dein Vorhaben sicher nicht realisieren können.

 

[Myhar]

AW: Media Query ausschließlich für Desktop

Gut möglich, dass ich deine Fragestellung nicht korrekt verstanden habe.
Eigeninitiative ist trotzdem keine von dir zu erkennen, lediglich weitere Fragen. Ist ja auch egal, wenn man intensiv sucht, dann kommt man zum Beispiel dies als zweiten Treffer angezeigt. Ist es das, was du willst?

 

[KasselJulian]

AW: Media Query ausschließlich für Desktop

@Myhar:
Mit dem Finden eines Posts ist es manchmal nicht getan.

Also note that not reverses the logic for the entire media query as a whole, not individual parts of it. not x and y = not (x and y) ≠ (not x) and y

 

[Myhar]

AW: Media Query ausschließlich für Desktop

So, ich bin auch wieder mal hier online.
Hast du dein Problem mittlerweile lösen können? Es steht nämlich auch folgendes dabei:

Note that not only works for the current media query, so if you comma separate, it only affects the media query it is within

Ich habe not allerdings noch nie verwendet, da ich es noch nie gebraucht habe. Auch stellt sich mir noch immer die Frage, was du mit Desktops, welche eine Breite von 1024px haben, machen willst. Da klingt es für mich nach wie vor danach, als ob du die als Tablets erkennen willst.

 

[KasselJulian]

AW: Media Query ausschließlich für Desktop

Auch stellt sich mir noch immer die Frage, was du mit Desktops, welche eine Breite von 1024px haben, machen willst. Da klingt es für mich nach wie vor danach, als ob du die als Tablets erkennen willst.

Also mein gesamtes Vorhaben:
Ich möchte :hover-Klassen nur dann an den Clienten schicken, wenn er diese auch unterstützt. Da das jedoch mobile Geräte sowie iPads nicht tun, muss ich einen Media-Query erzeugen, der eben explizit nur die Geräte anspricht, die NICHT die Auflösung bis 768px haben UND NICHT die Gerätebreite von 768px bis 1024px haben.
Da not nicht funktioniert, ist mein Problem auch noch nicht gelöst.

PS: ich habe es natürlich schon mit media (hover){} ausprobiert (wie vom W3C empfohlen), doch die haben da Entwicklungslücken und so funktioniert das nicht immer.

 

[Myhar]

AW: Media Query ausschließlich für Desktop

Verzeih meine Sturheit, aber mir dünkt, dass sich dein Problem anders lösen lässt. Wenn du :hover verwendest, dann ignorieren das Geräte, welche das nicht unterstützen doch, warum willst du dafür extra Styles ausliefern? Was ist dein Problem, wenn du :hover verwendest und zB das iPhone diesen Style erhält (und ignoriert)?

 

[KasselJulian]

AW: Media Query ausschließlich für Desktop

Das Problem ist, dass diese Styles nicht immer ignoriert werden. Gute Browser machen das, ja, doch eben nicht alle. Und solltest du mal etwas für mobile Geräte optimiert haben wirst du an den Punkt kommen, wo dir hover-Effekte, bei iPad, iPhone und bei Android-Devices, auf Klick begegnen. Denn diese Geräte lösen den Hover-Effekt auf Klick aus. Du wirst es manchmal garnicht bemerken, aber wenn du dann im Browser zurück navigierst ist das angeklickte noch im "hover"-Zustand und zu sehen.
Du kannst es auch ausprobieren indem du mal mit deinem Smartphone mit dem Finger über einen Link drüberfährst, jedoch dann wieder weggehst. Dann ist der Hover-Effekt zusehen.

Eine Lösung muss her

 

[Myhar]

AW: Media Query ausschließlich für Desktop

Habe mich über dieses Problem auch mal schlauer gemacht, da gibt es doch interessante Blogbeiträge dazu. Auch kann man sehen, wie Apple
Ich optimiere selten (man soll ja nie nie sagen) für mobile Geräte sondern lediglich für verschiedene Bildschirmgrößen. So lange man die Seite benutzen kann sehe ich keine Probleme, weshalb mir das Problem noch nie aufgefallen ist. Selber besitze ich auch ein iPhone und da ist mir dieses Verhalten in 1,5 Jahren noch nie bewusst aufgefallen. Vielleicht liegt es daran, dass ich Opera als Browser verwende oder es fällt dem User (mir) nicht auf. Bei der eigenen Seite ist man natürlich genauer, aber ich denke, User sind ein bestimmtes Verhalten auf Ihren Geräten gewohnt und solche Dinge sind für sie nicht störend. Man kann nicht auf jedem Gerät das exakt selbe Verhalten erzwingen, die Seite muss lediglich gut für den Besucher nutzbar sein und gleichzeitig ordentlich aussehen.
Lösung kann ich dir hier also keine anbieten, da meiner Meinung keine Lösung her muss ;-)

 

[KasselJulian]

AW: Media Query ausschließlich für Desktop

Ok so kann man das auch sehen, aber wenn du :hover-Effekte nimmst die z.B. die Breite des Buttons animiert verändern oder irgendwas anderes Spektakuläres bewirken sieht das einfach "scheiße" aus auf einem mobilen Gerät!
// EIDT: Habe gerade in der Mittagspause nochmal darüber nachgedacht. Es ist quatsch :hover auf mobilen Geräten zu ignorieren. Stell dir mal vor du hast eine Navigation die auf :hover reagiert. Was macht da wohl dein mobiles Endgerät? Nichts! So, dann musst du ersteinmal deine :hover-Effekte nur dann an den Clienten schicken wenn er es unterstützt sonst kommt es mit deiner Lösung zu Probleme: Mit jQuery die :hover-Effekte auf Klick simulieren.
jQuery ist nicht das Problem, aber woher weißt du welches Gerät hover und welches nicht unterstützt (in einem media-query)?