HTML-LINK-Tag für max-width UND max-height ?

[TIMS_Ralf]

Hallo's,
Wie -bitte - lautet der HTML-LINK-Tag, wenn ich für Media-Query's sowohl Max-Breite, als auch Max-Höhe zusammen angeben will ?
Habe dieses probiert, funzen aber nicht:

<LINK REL="alternate" MEDIA="only screen and (max-width: 1234px) and (max-height: 1234px)" HREF="index.htm">
<LINK REL="alternate" MEDIA="only screen and (max-width: 1234px and max-height: 1234px)" HREF="index.htm">
<LINK REL="alternate" MEDIA="only screen and (max-width: 1234px, max-height: 1234px)" HREF="index.htm">

Danke Euch!

 

[MrMurphy]

Media Queries sind als Inline-CSS meiner Kenntnis nach nicht zulässig und funktionieren deshalb nicht.

Media Queries mit mehreren Angaben werden so geschrieben:

@media only screen and (min-width: 1234px) and (max-width: 1234px) {
}

 

[Andreas-B]

Also bei mir klappt das tadellos. https://codepen.io/Mr_Beer/pen/PobLaKZ?editors=1111
Das Beispiel verwendet das media Attribut beim style tag, aber das funktioniert dort genauso.

Wichtig ist die Reihenfolge, in der die Tags eigebunden werden. Das Untere überschreibt das obere.
Das heißt, man muss die Styles ohne media immer am Anfang einbinden.
Wenn man diese zum Schluss einbindet, werde sie immer gewinnen und die anderen Styles werden niemals angezeigt.

 

[TIMS_Ralf]

Danke Euch erstmal!

Evtl. habe ich mich falsch ausgedrückt:
Ich meinte keine CSS-Anweisungen sondern das MEDIA-Attribut der HTML-LINK-Tags um aufgrund Media-Querys mit HREF auf eine andere WEB-Seite zu verweisen:

Solange ich max-width ODER max-height verwende, klappt alles - nur nicht wenn ich beide zusammen anwenden möchte nicht:

Hier nochmal meine bisherigen Varianten:

<LINK REL="alternate"
      MEDIA="only screen and (max-width: 1234px) and (max-height: 1234px)"
      HREF="index.htm">
   
<LINK REL="alternate"
      MEDIA="only screen and (max-width: 1234px and max-height: 1234px)"
      HREF="index.htm">
   
<LINK REL="alternate"
      MEDIA="only screen and (max-width: 1234px, max-height: 1234px)"
      HREF="index.htm">

Mein Frage richtet sich die richtige Syntax für das MEDIA-Attribut, wenn ich max-width und max-height gleichzeitig im MEDIA-Attribut verwenden will.

Danke!

 

[Andreas-B]

-

 

[MrMurphy]

Die richtige Schreibweise

MEDIA="only screen and (max-width: 1234px) and (max-height: 1234px)"

hat Andreas-B dir in seinem Beispiel gezeigt und direkt in einem Online-Beispiel demonstriert. Das funktioniert bei einem link-Element / -Tag genau so.

Eventuell liegt bei dir ein Verständnisproblem der Auswirkungen vor. Hast du mal ein konkretes Beispiel?

 

[TIMS_Ralf]

OK - danke nochmals!

Ich verwende kein "Responisiv WEB-Design", sondern erstelle WEB-site's je "Gerät", also für Desktop / Laptop, für Tablets und für Smartphones je eine eigene site . Das funzt sehr gut und die WEB-sites werden bei Google & Co ungleich erfolgfreicher gerankt.
Außerdem ist die Pflege wesentlich einfacher.

Dazu werden je WEB-site jene META-LINK-Tags benötigt, die je nach Gerät für die Suchmaschinen auf die entsprechenden Seiten verweisen, wobei ich bislnag nur "max-width" verwendete.

Nun hatte ich das Problem, dass ein kleinerer Kunde auch eine WEB-site für Smart-TV-Geräte wollte - und da sind meine Anweisungen kollidiert ( = falsche Geräte-WEB-site aufgerufen). Das kann ich umgehen, indem ich auch max-heigt und die Ausrichtung (orientation: portrait / landscape) abfrage.

Ich mache das alles mit Javascript, bringe alle CSS-Anweisung geräte-unabhängig in einer CSS-Datei unter.
Lediglich für die Suchmaschinen braucht es diese Angaben wohl - sonst bekommt man böse Mails von Google und das Ranking wird abgestuft.

Ich teste das jetzt mal auf allen Geräten und melde mich nochmal...
So long - und danke!

 

[TIMS_Ralf]

Hallo nochmal,

Eure Lösung war ja identisch zu meiner ersten Variante. Der Verweis einer WEB-site für Smart-TV's hat also noch immer nicht funktioniert. Hier nun meine Lösung für Smart-TV-sites:

Wenn RegExpr = true ergibt, erst dann die weiteren Media-Query's abfragen und dann auf die site für Smart-TV linken (ansonsten wird Tablett bzw. Smartphone erkannt):

// .....
else if( /AppleTV|SMART-TV|SmartTV|NETTV|HbbTV|DTV|TV Store|GoogleTV|Roku|DVP-/i.test(window.navigator.userAgent) )
{
if( Abfrage von Viewports etc. ...) window.location.href = tv_site/index.htm;
else { ... }
)

Die HTML-LINK-Tag Verweise müssen dann enspr. des Geräts in den WEB-Seiten der Geräte-sites gesetzt werden, damit die Suchmaschinen sie geräteabhängig adressieren können.

Nur mit CSS-Regeln können TV-Geräte unter "Responsive WEB-Design" kaum (gar nicht) erkannt werden, da dann die Einstellungen für Tablett / Handys herangezogen werden - und dann funktionieren die WEB-sites nicht bzw. kaum mehr.

Die RegEx wäre evtl. zu verbessern und (zukünftig) zu erweitern....
Außerdem muß "manuell" geprüft bzw. eruiert werden, welche TV-Browser auf welchem TV-Gerät ( tlw. herstellerabhängig ! ) eine Darstellung überhaupt halbwegs professionell erlauben. Der Silk-Browser ( Amazon ) ist z.Z. ne Katastrophe für WEB-sites auf Smart-TV (Android).

Der Firefox macht bei der Identifizierung auf Smart-TV ( Android ) mächtige Probleme, da in der Browsererkenung das Gerät nicht deklariert ist und Viewports eben identisch zu anderen Geräten sind.

Chrome ist auf TV-Geräten (Android) fehlerhaft und extrem langsam. Das dürfte an den extrem leistungsschwachen Prozessoren von TV-Geräten zu liegen, die für WEB-sites z.Z. nicht ausgelegt sind.

Unter Streaming mit Amazon-FireTV funktioniert es bei den meisten Browser am besten - außer mit Silk.
Aber da sind die Viewports minimal - obwohl die TV hohe Auflösungen bieten.

So scheint es erstmal (für die meisten TV-Browser und gängigste TV-Geräte) zu funktionieren.

Anders hab ich es jedenfalls nicht hinbekommen.

Grüße!