Responsive iOS 6 Theme für FHEM (CSS + JS) sowohl für iOS, Android und Desktop!

[Blackcat]

noch ein kleines Update: content wird jetzt beim offenen mobile Menü zusätzlich ausgeblendet

[Bennemannc]

Hallo Sandra,

ich habe mir die neuen Dateien mal gezogen. Bei jedem Raumwechsel wir jetzt auf meinem IPad4 die Ansicht erstmal zu groß dargestellt und dann gezoomt. Das war früher mMn nicht so. Es macht das Ganze etwas unruhig.

Gruß Christoph

Edit: Chrome unter IOS macht das - Safari macht es nicht.

[Loredo]

Hallo Sandra,


ich bin wohl irgendwie zu doof
Was muss ich machen, um das responsive Design auf iPad und iPhone auszuprobieren?
Habe die Dateien aus dem 1. Beitrag geladen und in /opt/fhem/www/pgm2 kopiert. Anschließend noch das JavaScript Attribut ergänzt und FHEM neu gestartet.
Ich sehe allerdings keinen Unterschied zum bisherigen Theme aus dem SVN.


Was mache ich falsch?


Ich habe als stylesheetPrefix sowohl ios6touchpad als auch ios6 ausprobiert. Muss ich außer stylesheetPrefix und JavaScript noch andere Attribute setzen?


Wäre für ein paar Hinweise sehr dankbar




Edit: Achso, im Safari sagt mir der Webinspector noch folgenden Fehler beim Laden der ios6.js:

Code Auswählen Erweitern



[Error] ReferenceError: Can't find variable: $
global code (ios6.js, line 6)


[Bennemannc]

Hallo Loredo,

ich gehe mal davon aus, das Du nichts falsch machst. Die Änderungen waren nicht im Design sondern mehr unter der Haube. Wenn Du alles richtig gemacht hast, müsstest Du das Menü mit einem Klick auf das Fhem Icon ausblenden können. Wenn Du ein Tablett hast, und es hochkant drehst, wird das Menü automatisch weggeblendet um mehr Platz zu haben.

Gruß Christoph

[Loredo]

Hi Christoph


da hab ich mich wohl falsch ausgedrückt. Ich hatte auch lediglich erwartet, dass sich das Menü ein und ausblenden lässt. Es funktioniert jedoch weder eines Klicks auf das Logo noch wenn ich zwischen Landscape und Portrait wechsle. Deshalb nahm ich an, ich würde etwas falsch machen beim einspielen, weil es ja bei anderen zu funktionieren scheint.




Gruß
Julian

[Bennemannc]

Hallo Julian,

also ich habe nur

Code Auswählen Erweitern

define WEBtablet FHEMWEB 8085 global
attr WEBtablet JavaScripts pgm2/ios6.js
eingebaut, das reichte. Wie kommt man an den Webinspector beim IPad ? Dann könnte ich mal nachsehen, ob bei mir auch solche Meldungen kommen.

Gruß Christoph

[Loredo]

Wie kommt man an den Webinspector beim IPad ? Dann könnte ich mal nachsehen, ob bei mir auch solche Meldungen kommen.

Das funktioniert über den normalen Safari Browser (am Mac). Bei installiertem Xcode und iOS Simulator kannst du dann im Developer-Menü des Safari auf dem Mac den Web Inspector auf dem Mac so starten, dass er mit dem Mobile Safari im Simulator spricht.

Allerdings genügt es auch vollkommen, wenn du die Seite einfach im normalen Safari auf dem Mac öffnest und dessen Webinspector startest. Da wird der Fehler auch angezeigt

[Bennemannc]

Hallo Julian,

..... ich habe keinen Mac. Das Geld hat nur für ein Pad gereicht, und da geht das anscheinend nicht. Vielleicht hat Sandra ja noch einen Tip.

Gruß Christoph

[Loredo]

..... ich habe keinen Mac. Das Geld hat nur für ein Pad gereicht, und da geht das anscheinend nicht.

So wars nicht gemeint, mea culpa. Du hattest gefragt

[Blackcat]

Hi Loredo,

Bitte poste den Head der html Datei und deine JavaScript attr von deinem fhemweb, dann kann ich schauen ob was nich passt

@Christoph: meinst du den ipad Chrome oder dn normalen?

[Bennemannc]

Hallo Sandra,

ich meine Ipad Chrome ich habe ich schon mit den Einstellungen rumgespielt, leider ohne Erfolg. Android 4.4 Chrome funktioniert übrigens ohne ständiges Zoomen.

Gruß Christoph

[Blackcat]

habe auch mal getestet und es scheint ein Viewport Problem des iPads zu sein, da auch die Höhe im Portraitmodus noch falsch ist

hast du auch schon ein Handy testen können?

[Bennemannc]

Hallo Sandra,

ein IPhone habe ich nicht, nur einen IPod mit IOS 8.1.2. Das automatische Umschalten geht und es wird auch nicht gezoomt.
Ich habe mal den Port 8085 auf dem IPod mit Chrome ausprobiert. Hier wird komischerweise das Bild erst kleiner aufgebaut und dann wir die Schrift und alles größer. Auf dem IPad ist das umgekehrt - erst zu groß und dann kleiner.

Gruß Christoph

[Blackcat]

Habe etwas am viewport gedreht und jetzt ist es besser  nur im landscape modus ist die Auflösung noch zu niedrig

Warnung: enthält debugging meldungen mit der Auflösung

[Bennemannc]

Hallo Sandra,

Chrome stürzt nach den Debug Messages ab. Die Auflösung auf dem IPad passt nicht - es ist alles viel zu groß.

Gruß Christoph