Flask und mobile Geräte?

[burli]

Ich erstelle gerade eine Webseite mit Flask und die soll auch für mobile Geräte taugen. Nur wie erkennt man am besten ein mobiles Gerät und wie kann ich dafür ein passendes Template ausliefern?

Mach ich die Browser Erkennung am besten per User Agent?

[burli]

Ok, Browser Erkennung via User Agent dürfte das sinnvollste sein.

Aber wie kann ich, abhängig vom User Agent, unterschiedliche Layouts und Styles senden?

[jtk]

wenn du nur verschiedenes css brauchst hilft dir vielleicht http://www.w3.org/TR/CSS2/media.html:

[burli]

wenn du nur verschiedenes css brauchst hilft dir vielleicht http://www.w3.org/TR/CSS2/media.html:

Mit unterschiedlichen Stylesheets ist es vielleicht nicht getan. Das Layout dürfte komplett anders sein und auch die Inhalte unterscheiden sich in gewissen Bereichen.

[DasIch]

Unterscheidung basierend auf dem User Agent führt i.d.R. irgendwann zu Fehlern und stösst schnell an Grenzen z.B. wenn jemand sein Smartphone/Tablet um 90 Grad dreht.

Dementsprechend solltest du Layout usw. möglichst ausschliesslich über CSS Media Queries anpassen. Alles andere macht eigentlich nur Sinn wenn du anderen Inhalt oder weniger Inhalt anbieten willst z.B. bei Bildern um Bandbreite zu sparen.

[burli]

Alles andere macht eigentlich nur Sinn wenn du anderen Inhalt oder weniger Inhalt anbieten willst z.B. bei Bildern um Bandbreite zu sparen.

Anderer/weniger Inhalt ist ja der Punkt. Außerdem eine andere Navigation. Ich weiß nicht, ob das mit CSS Media Queries alleine zu erreichen ist.

[burli]

Ich hab jetzt mal was probiert

Code: Alles auswählen

    <style type="text/css">
    @media handheld
    {
        h1 {color:blue;}
    }
    @media screen
    {
        h1 {color:red;}
    }
    @media print
    {
        h1 {color:green;}
    }
    </style>

Am PC ist es rot, beim Ausdruck ist es grün, aber auf einem Androiden ist es ebenfalls rot. Der Teil funktioniert schonmal nicht wie erwartet. Oder hab ich da einen Denkfehler?

[noisefloor]

Hallo,

Tipps: ruf doch mal eine dir bekannte Seite auf, die nachweislich ein "mobiles" Design hat und wirf einen Blick in den HTML-Quellcode und die CSS Dateien.

Oder du machst es so, wie uu.de das macht - dass du die mobile Seite expliztit aufrufen musst (z.B. http://forum.ubuntuusers.de/?flavour=mobile)

Gruß, noisefloor

[burli]

das beste Musterbeispiel ist Golem. Leider weiß ich nicht, wie ich mir den Sourcecode auf dem Android anzeigen lassen kann, ob es da Unterschiede gibt.

Hatte aber gerade die Idee, Midori zu verwenden. Da weiß ich, wie ich den User Agent umstellen kann. Sieht komplett anders aus, obwohl in beiden Fällen golem.de ohne Zusätze aufgerufen wird. Ich denke, die liefern abhängig vom User Agent komplett andere Inhalte aus.

http://ubuntuone.com/5Y50f8wyrAAyv6iQrCGuCS

[noisefloor]

Hallo,

für den Firefox gibt es doch eine Extension, mit der man den an die Webseite gesendeten Header abgreifen kann. Da wäre doch auch was für dich. Zumindest sieht du dann, wer wann was sendet.

Gruß, noisefloor

[frabron]

Jo, Live HTTP headers benutze ich dafür

[burli]

Hm, ok. Werde ich mir mal anschauen.

[sma]

Ein Stichwort, was noch nicht genannt wurde, ist "Responsive Design".

Ich würde es allerdings pragmatisch mit einer prinzipiellen Erkennung der Plattform kombinieren, denn nur Media-Queries können noch keine optimale Darstellung auf dem mobilen Gerät sicherstellen, weil z.B. immer noch zu viel Daten übertragen werden (und bei Edge-Verbindungen zählt jedes Byte) oder es werden viel zu viele unnötige JavaScript-Bibliotheken übertragen.

http://www.alistapart.com/articles/resp ... eb-design/
http://coding.smashingmagazine.com/2011 ... eb-design/


Stefan