Mobile Detect in Smarty

Ideen für neue Funktionen in CONTENIDO?
Antworten
Horst1234
Beiträge: 366
Registriert: Sa 25. Okt 2008, 12:45
Wohnort: Bremen
Kontaktdaten:

Mobile Detect in Smarty

Beitrag von Horst1234 » Do 18. Aug 2016, 16:23

Hallo zusammen,
gibt es eine Möglichkeit, im Smarty-Template die Browserbreite, oder besser noch gleich die Art des Endgerätes (mobil oder nicht) abzufragen, um dann unterschiedlichen Templatecode auszuliefern.
Etwa um eine Slideshow auf mobilen Geräten auszublenden - css display:none macht ja wenig Sinn, da ja die Daten trotzdem abgerufen werden ...

Etwa so:
{if $_is_mobile}
--- Bild ---
{else}
--- Slideshow ---
{/if}

Geht das mit dem implementierten Smarty-Plugin? Muss noch zusätzlicher Code ins Moduloutput für eine solche Smarty-Funktion?
(Änliches wird hier angefragt: http://www.smarty.net/forums/viewtopic. ... d2fec32738, lässt sich das integrieren?)
Gruß,
Horst
Webdesign | Contenido: Templateprogrammierung, Einrichtung und Verwaltung | http://www.w2media.de

homtata
Beiträge: 1142
Registriert: Mi 14. Jan 2004, 14:41
Kontaktdaten:

Re: Mobile Detect in Smarty

Beitrag von homtata » Do 18. Aug 2016, 17:13

Nun ja, du musst dich wohl erstmal entscheiden, ob du jetzt eine responsive Seite oder eine speziell ausgelieferte "Mobil"-Version willst. Wenn letzteres, dann musst du dir halt ein PHP-Script suchen, dass die Abfrage hierfür einigermaßen beherrscht und dann eine true/false-Variable an Smarty übergeben. Die Frage ist, woran sich das Script orientieren soll - am User Agent? An der Bildschirmauflösung?
Smarty kann meines Wissens mehr oder weniger nur vorhandene Variablen nachträglich beeinflussen, aber keine solchen komplexen Abfragen durchführen.
Wenn die Seite primär schon VOR der Auslieferung entscheidet, was mobil reinzuladen ist und was nicht, dann wird sie aber auch nicht beim Drehen des Bildschirms (z.B. beim Tablet) nachträglich Bilder zeigen, wenn der Platz ggf. ausreichen würde für eine Desktop-Version.

rethus
Beiträge: 1851
Registriert: Di 28. Mär 2006, 11:55
Wohnort: Mönchengladbach
Kontaktdaten:

Re: Mobile Detect in Smarty

Beitrag von rethus » Fr 19. Aug 2016, 08:36

Horst1234 hat geschrieben:Hallo zusammen,
gibt es eine Möglichkeit, im Smarty-Template die Browserbreite, oder besser noch gleich die Art des Endgerätes (mobil oder nicht) abzufragen, um dann unterschiedlichen Templatecode auszuliefern.
Etwa um eine Slideshow auf mobilen Geräten auszublenden - css display:none macht ja wenig Sinn, da ja die Daten trotzdem abgerufen werden ...
TIPP: Mach sowas mit CSS-Viewports. Damit sparst du zwar z.B. den Sourcecode für einen nicht benutzen Slider in der Mobile-Version nicht ein, aber es ist eine schnell, einfache und saubere Lösung um eine Webpage für alle Endgeräte zu optimieren.

Beispiel:

Code: Alles auswählen

@media only screen and (max-width: 250px) {
    .slider {
        display:none;
        position: relative;
        top: -75px;
    }
}
@media only screen and (min-width: 250px) {
    .slider {
        display:block;
        position: relative;
        top: -75px;
    }
}
Could I help you... you can help me... buy me a coffee . (vielen ❤ Dank an: Seelauer, Peanut, fauxxami )

xstable.com: - HighSpeed Hosting, Domains, DomainReselling, Linux-Administration
suther.de: - App-Programierung, High-Performance-Webpages, MicroServices, API-Anbindungen & Erstellung

Software... ein Blick wert: GoogleCalender Eventlist, xst_dynamic_contentType

Faar
Beiträge: 1915
Registriert: Sa 8. Sep 2007, 16:23
Wohnort: Brandenburg
Kontaktdaten:

Re: Mobile Detect in Smarty

Beitrag von Faar » Fr 19. Aug 2016, 08:43

Man kann Javascript dazu nehmen.
Das habe ich in Stackoverflow gefunden:

Code: Alles auswählen

window.mobilecheck = function() {
  var check = false;
  (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
  return check;
}
Aber, ich hatte auch mal per Javascript eingesetzte Mobilerkennung und das funktioniert so nicht richtig, weil manche Mobilgeräte gar keine Mobilkennung heraus geben und sich bei jedem neuen Gerät die Kennung ändern kann.
Und was soll man bei z.B. meinem Tab mit 2560 Pixel Auflösung mit einer Mobile-Seite machen?
Das ist mehr Auflösung als mein aktueller PC-Monitor.

Interessanter wird es so (Stackoverflow):

Code: Alles auswählen

var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
Daraus kann man dann erstens quasi den Viewport festlegen, ab dem man mobile Darstellung will,
und zweitens kann man damit (hoffentlich) feststellen, ob ein mobiles Gerät quer oder hochkant gehalten wird.

Aber was nützt das alles?
macht ja wenig Sinn, da ja die Daten trotzdem abgerufen werden
Gar nichts.
Denn die Daten sind schon da, die werden auf dem Server bereits per PHP bereitgestellt und per HTTP zum Client geschickt, bis das Javascript erst auf dem PC erkennen kann, was da Sache ist.
Anders wäre das, wenn man die großen Daten per Ajax nachholen würde.
Sinnvollerweise dann erst eine minimale Seite bereitstellen und dann, bei großem Monitor, die großen Datenmengen wie große Bildslider oder Videos nachladen.
Aber schnell wird so eine Seite nicht, absolut nicht.

Zu Smarty:
Da muss ein grundsätzliches Missverständnis eines Template-Systems vorliegen.
Smarty bekommt die Daten vom PHP geliefert, z.B. das berüchtigte $tree bei Navigationsmodul und cCategoryHelper-Class.
$tree ist auf perverse Weise gigantisch mit Daten überladen, aber mittels Smarty holt man sich da nur einen winzigen Teil für die Menüdarstellung heraus.
Alleine die Tatsache, dass $tree existiert, macht die Seite schon langsam.

Für den Traffic ist das weniger von Belang, weil tatsächlich nur die wenigen Menüdaten übermittelt werden.
Das geschieht aber alles bevor es übermittelt wird, das heißt, Smarty läuft auf dem Server und nicht auf dem Client, wo schlussendlich die Größe festgestellt werden würde.
Anders bei CSS und Media-Queries, denn CSS läuft auf dem Client, im Browser.
So wie Javascript.

Nun lass dir was einfallen, wie Du mit Javascript das Browserfenster erkennen könntest und zugleich ein Mobilgerät, das über Mobilfunk sich die Daten holt.
Also drei Dinge auf einmal.
Denn, falls das Mobilgerät einen hochauflösenden Monitor hat und am WLan hängt, es es nahezu egal, wenn da große Daten rollen.
Sinn, kleinere Daten rüber zu schicken macht es nur, wenn es Traffic-Begrenzung und/oder eine lahme Verbindung gibt.

Slideshows können auch auf einem Smartphone gut aussehen und auch Videos, wie nahezu jeder weiss.
Wenn Platz für ein Bild ist, ist auch Platz für eine Slideshow oder ein Video.
Bild ist Bild.
Es geht also nur um die Datenmenge.
Und siehe oben, lass Dir was einfallen, wie Du zuverlässig Mobilgeräte mit aktuellem und langsamen Mobilfunkanschluss mit aufgebrauchtem Trafficguthaben und kleinem Monitor erkennen kannst.
Wer LTE und genug Trafficguthaben hat, scheißt meistens auf begrenzte Darstellung, der will auch Slidershows und Videos sehen.
Wozu hat er ein teures Gerät mit teurem Vertrag, wenn er dann doch mit Peanuts gefüttert wird?

Responsive Design löst nicht das Datenmengen-Problem, aber damit kann man die Seitendarstellung so anpassen, dass sie auf verschiedenste Monitore noch ansprechend aus sieht und bedienbar ist.
Fliegt der Bauer übers Dach, ist der Wind weißgott nicht schwach.

rethus
Beiträge: 1851
Registriert: Di 28. Mär 2006, 11:55
Wohnort: Mönchengladbach
Kontaktdaten:

Re: Mobile Detect in Smarty

Beitrag von rethus » Fr 19. Aug 2016, 09:06

Ich denke du musst da einige Sachen stärker differenzieren.

1) JS zum bestimmen von Geräten... och nööö Leute lasst sowas sein :roll: "Nutze niemals JS, wenn du es in CSS erledigen kannst" [1. Gesetz von Mr. HTML-Performance]
2) Baue dein Template mit Verstand auf, dann kannst du viele Flaschenhälse im voraus umgehen. Bilder z.B. so einbinden, dass Sie via CSS geladen werden, DENN die meisten Browser laden diese Bilder erst wenn Sie gebraucht werden. (siehe http://stackoverflow.com/questions/2396 ... downloaded). Das behebt auch das Problem, das Bilder in unterschiedlicher Größe "alle" in die Page geladen werden. So werden bei Mobile, auch nur die Mobile-Bilder geladen.
3) Wenn du JS nutzt, binde es so ein, das es asynchron geladen wird (zumindest da wo möglich).
4) Und ja... wie du sagst, wenn du richtig Daten sparen willst, baue eine Webpage als "Data as demand" auf. Hole die Daten via Ajax / Websocket dann wenn du sie brauchst [wobei dies die Kompatibilität zu den Browsern extrem eingrenzen kann, da exzessiv js genutz wird]. Wenn man es schon macht, dann ist AngularJs einem hier eine sehr gute Hilfe.
Could I help you... you can help me... buy me a coffee . (vielen ❤ Dank an: Seelauer, Peanut, fauxxami )

xstable.com: - HighSpeed Hosting, Domains, DomainReselling, Linux-Administration
suther.de: - App-Programierung, High-Performance-Webpages, MicroServices, API-Anbindungen & Erstellung

Software... ein Blick wert: GoogleCalender Eventlist, xst_dynamic_contentType

Faar
Beiträge: 1915
Registriert: Sa 8. Sep 2007, 16:23
Wohnort: Brandenburg
Kontaktdaten:

Re: Mobile Detect in Smarty

Beitrag von Faar » Fr 19. Aug 2016, 09:25

rethus hat geschrieben:Wenn man es schon macht, dann ist AngularJs einem hier eine sehr gute Hilfe.
Das sollte man sich mal anschauen.
Habs selbst bis jetzt noch nicht eingesetzt, liest sich aber sehr interessant.
Fliegt der Bauer übers Dach, ist der Wind weißgott nicht schwach.

Horst1234
Beiträge: 366
Registriert: Sa 25. Okt 2008, 12:45
Wohnort: Bremen
Kontaktdaten:

Re: Mobile Detect in Smarty

Beitrag von Horst1234 » Di 23. Aug 2016, 11:25

Liebes Forum,
das sind ja viele, viele Gedanken und Tipps: erstmal Danke!
Ich hab mich wirklich etwas arg verkürtzt ausgedrückt, wenn's irgentwie geht, arbeite ich natürlich mit media queries.
Mir gehts wirklich nur um die Datenmengen: wenn eine Slideshow oben im Header auftaucht, kann ein Smartphone ohne super Verbindung schon mal viel Zeit brauchen.
Abgesehen davon, das ne eher grafisch orientierte Header-Slideshow (mit Text) nicht immer wirklich Sinn macht auf'm Smartphone: da reicht dann oft wirklich ein Bild.
Schade eigentlich, das Smarty das nicht kann: aber als Programmier-Laie darf man ja noch träumen :)
Gruß,
Horst
Webdesign | Contenido: Templateprogrammierung, Einrichtung und Verwaltung | http://www.w2media.de

rethus
Beiträge: 1851
Registriert: Di 28. Mär 2006, 11:55
Wohnort: Mönchengladbach
Kontaktdaten:

Re: Mobile Detect in Smarty

Beitrag von rethus » Di 23. Aug 2016, 17:12

Hi Horst,
da hattest aber schon mein Posting in Sachen CSS und Laden von Bildern via CSS gelesen?!? :|
Hoffe dass dir das bei deiner Entscheidung hilft. Manchmal (wenn auch selten) muss man nicht so kompliziert, wie man gerne möchte :lol:
Could I help you... you can help me... buy me a coffee . (vielen ❤ Dank an: Seelauer, Peanut, fauxxami )

xstable.com: - HighSpeed Hosting, Domains, DomainReselling, Linux-Administration
suther.de: - App-Programierung, High-Performance-Webpages, MicroServices, API-Anbindungen & Erstellung

Software... ein Blick wert: GoogleCalender Eventlist, xst_dynamic_contentType

Antworten