Gibt es eine Möglichkeit über TS nicht nur den Agent abzufragen, sondern auch welches Device benutzt wird?
Bspw. möchte ich Handys und Tables verschiedene CSS Dateien ausliefern, da die Auflösung doch enorm auseinander geht.
Und ich möchte ungeren die CSS Datei noch mehr zumüllen indem ich mit @media arbeite.
Ich habe auch einige Extension gesehen die, die detection machen, leider sind aber alle darauf ausgelegt auf eine URL zu Rewriten, was ich nicht als sinnvoll erachte, da man in meinem Fall nur das CSS anpassen muss und keine komplett andere Seite ausliefert.
ich würde doch eher zu den media queries raten. Facebook hat mal eine Statistik veröffentlicht das etwa 5000 Mobile Geräte auf deren Systeme zugreifen. (Ein Device mit unterschiedlichen Versionen der Betriebssysteme galt jedoch immer als ein eigenes Device). Daher wird es auch schwierig alle Devices korrekt abzufragen, da auch ständig neue herauskommen. Besser wäre es hier wirklich die Größe des Viewport abzufragen und dann mit einem Media Query drauf zu reagieren.
Das tue ich bereits, jedoch will ich meine CSS für Desktops schmal halten und nicht noch extra vergrößern. Daher Frage ich im Vorfeld im TS ab, ob es ein Mobiles Gerät ist und liefere die entsprechend anderen CSS Daten aus.
Damit kann ich natürlich zum Teil auch die Tablets herausfiltern, schön wäre es aber, wenn dies bereits per TS möglich wäre.
Bisher sieht mein Aufbau so aus:
[useragent = *iPhone*] || [useragent = *iPod*] || [useragent = *iPad*] || [useragent = *Android*] || [useragent = *OperaMini*] || [useragent = *BlackBerry*]
lib.viewpoint = TEXT
lib.viewpoint.value = <meta name="viewport" content="width=device-width" />
page.headerData.1000 < lib.viewpoint
page {
includeCSS.file05 = fileadmin/includes/m-style.css
includeCSS.file55 = fileadmin/includes/m-tt_news.css
includeCSS.file60 = fileadmin/includes/m-rgaccordion.css
includeCSS.file65 = fileadmin/includes/m-rahmen.css
includeCSS.file90 = fileadmin/includes/m-nav.css
}
[end]
Dazu entsprechend sehen die CSS Dateien aus:
@media only screen and (max-width: 600px), only screen and (max-device-width: 600px) {
#wrap {
-moz-background-clip: border;
-moz-background-inline-policy: continuous;
-moz-background-origin: padding;
background: #FFFFFF none repeat scroll 0 0;
margin: 0 auto;
padding-top: 10px;
padding-left: 15px;
padding-right: 15px;
text-align: left;
width: 480px;
}
....
@media only screen and (max-width: 360px), only screen and (max-device-width: 360px) {
#wrap {
width: 330px;
}
....
Hi,
na im Prinzip fragst du doch schon Smartphone und Tablet ab.
[useragent = *iPhone*] || [useragent = *iPad*]
Habe gerade diese Seite hier gefunden:
http://html5-mobile.de/blog/wichtigsten-user-agents-mobile-devices-jquery-mobile
In den User Agents steht zumeist das Device mit drin, mehr oder weniger.
Die Frage ist nur wieviele Tablet Hersteller da noch mal selbst Handanlegen und die Browser anpassen.
Wenn dir das nicht reicht könntest du dir auch eine eigene Condition mit einer userfunc schreiben, wo du nochmal speziell filerst. hier gibt es noch ein paar mehr Infos.
https://docs.typo3.org/m/typo3/reference-typoscript/main/en-us/Conditions/Index.html