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.