{"id":397,"date":"2011-08-04T20:59:25","date_gmt":"2011-08-04T18:59:25","guid":{"rendered":"https:\/\/sgaul.de\/?p=397"},"modified":"2014-03-13T21:34:55","modified_gmt":"2014-03-13T20:34:55","slug":"j-query-mobile-nicht-nur-furs-smartphone","status":"publish","type":"post","link":"https:\/\/sgaul.de\/2011\/08\/04\/j-query-mobile-nicht-nur-furs-smartphone\/","title":{"rendered":"J-Query Mobile: Nicht nur f\u00fcrs Smartphone"},"content":{"rendered":"

Ich m\u00f6chte hier kurz \u00fcber meine ersten Erfahrungen mit J-Query Mobile<\/a> berichten. Zun\u00e4chst war ich skeptisch: F\u00fcr das Tweedback-Projekt<\/a> ben\u00f6tigten wir eine Webgrundlage, die sowohl auf mobilen Ger\u00e4ten wie auch auf gro\u00dfen Rechnern brauchbar ist. Auf dem Smartphone sehen die Ergebnisse klasse aus – das war schon vorher klar. F\u00fcr Ger\u00e4te mit gr\u00f6\u00dferen Aufl\u00f6sungen kann man dann einfach modifizieren und so gute Ergebnisse erzielen.<\/p>\n

Auf kleinen Bildschirmen…<\/h2>\n
\"\"<\/a>
J-Query Mobile auf dem Smartphone<\/figcaption><\/figure>\n

Wie man sieht, ist das Ergebnis auf dem Telefon sofort sehr h\u00fcbsch. Hier f\u00fcr reicht es, der noch etwas knappen Dokumentation<\/a> zu folgen. Was dort allerdings fehlt, ist ein Hinweis, dass die Emulierung von gro\u00dfen Bildschirmen auf Telefonen deaktiviert werden muss. Hierzu einfach folgendes im Head notieren:<\/p>\n

<meta name=\"HandheldFriendly\" content=\"true\" \/>\r\n<meta name=\"viewport\" \r\n\tcontent=\"width=device-width, height=device-height, user-scalable=no\" \/><\/pre>\n
… und auf gro\u00dfen Monitoren<\/h2>\n
Diese einspaltige Aufteilung ist f\u00fcr gro\u00dfe Bildschirme denkbar schlecht geeignet. Mit ein paar Tricks kann man hier aber schnell in ein Zweispaltenlayout umwandeln. Hierf\u00fcr werden die beiden Bl\u00f6cke \u201eCreate a new Event\u201c und \u201eMore…\u201c nicht in ein Div-Element mit der Content gepackt, sondern wie folgt aufgeteilt:<\/p>\n
<div data-role=\"page\" id=\"create-event\">\r\n\t<div data-role=\"header\" data-theme=\"b\">\r\n\t\t<h1>Tweedback<\/h1>\r\n\t<\/div>\r\n\t<div data-role=\"content\">\r\n\t\t<div class=\"content-primary\">\r\n\t\t\t<h2>Create a new Event<\/h2>\r\n\t\t<\/div>\r\n\t\t<!-- \/div.content-primary -->\r\n\r\n\t\t<div class=\"content-secondary\">\r\n\t\t\t<h2>More...<\/h2>\r\n\t\t<\/div>\r\n\t\t<!-- \/div.content-secondary -->\r\n\r\n\t<\/div>\r\n\t<!-- \/content -->\r\n<\/div><\/pre>\n
Auf kleinen Ger\u00e4ten macht dies zun\u00e4chst keinen Unterschied. Nun nutzen wir moderne CSS-3-Weichen, um die beiden Bl\u00f6cke Primary- und Secondary-Content ab einer bestimmten Aufl\u00f6sung nebeneinander darzustellen.<\/p>\n
\/* === Device size switches *\/\r\n\r\n@media only screen and (min-width: 768px) {\r\n\t.content-secondary {\r\n\t\tfloat: right;\r\n\t\tpadding: 0;\r\n\t\twidth: 30%;\r\n\t}\r\n\t.content-primary {\r\n\t\tfloat: left;\r\n\t\tpadding: 0;\r\n\t\twidth: 65%;\r\n\t}\r\n}<\/pre>\n
Nat\u00fcrlich sind noch diverse andere Anpassungen f\u00fcr Laptop und Schreibtischrechner denkbar. So ist die Schrift- und Formulargr\u00f6\u00dfe nicht jedermanns Sache und wirkt auf den Screenshots etwas erschlagend. Mit dem angesprochenen Ansatz kann man aber vergleichsweise einfach all sowas erreichen – mit vergleichsweise geringem Aufwand.<\/p>\n
\"\"<\/a>
J-Query Mobile auf gro\u00dfen Bildschirmen<\/figcaption><\/figure>\n
J-Query Mobile: Nur der Name ist schlecht<\/h2>\n
Der Namenszusatz \u201eMobile\u201c ist etwas ungl\u00fccklich: Auch auf gro\u00dfen Rechnern kann man das Framework wunderbar nutzen und einfach moderne Webapplikationen erzeugen, die auf nahezu jeder Plattform laufen.<\/p>\n","protected":false},"excerpt":{"rendered":"
Ich m\u00f6chte hier kurz \u00fcber meine ersten Erfahrungen mit J-Query Mobile berichten. Zun\u00e4chst war ich skeptisch: F\u00fcr das Tweedback-Projekt ben\u00f6tigten wir eine Webgrundlage, die sowohl auf mobilen Ger\u00e4ten wie auch auf gro\u00dfen Rechnern brauchbar ist. Auf dem Smartphone sehen die Ergebnisse klasse aus – das war schon vorher klar. F\u00fcr Ger\u00e4te mit gr\u00f6\u00dferen Aufl\u00f6sungen kann man dann einfach modifizieren und so gute Ergebnisse erzielen.<\/p>\n","protected":false},"author":1,"featured_media":402,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[91],"tags":[158,111,112],"_links":{"self":[{"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/posts\/397"}],"collection":[{"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/comments?post=397"}],"version-history":[{"count":12,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/posts\/397\/revisions"}],"predecessor-version":[{"id":2537,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/posts\/397\/revisions\/2537"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/media\/402"}],"wp:attachment":[{"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/media?parent=397"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/categories?post=397"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sgaul.de\/wp-json\/wp\/v2\/tags?post=397"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}