Announcement

Collapse
No announcement yet.

Fullscreen mode in WebApp

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Fullscreen mode in WebApp

    Hallo,

    ich habe folgendes Problem:

    Ich hab mir eine WebApp mit Hilfe von jQuery Mobile 1.2 gebaut. Das funktioniert auch alles super.
    Nun möchte ich die App aber auch gern im Vollbildmodus laufen lassen, d. h. ohne Adresszeile, Symbolleiste etc.
    Dazu habe bereits ich im Internet etwas recherchiert und herausgefunden, dass es da die folgenden Meta-Tags gibt:

    Code:
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    Das klappt einwandfrei. Allerdings habe ich gelesen, dass die Tags iOS-spezifisch sind und unter Android nicht ausgewertet werden.
    In der Dokumentation zu jQuery Mobile steht, dass das Framework diese Umschaltung eigentlich Skript-seitig (d. h. ohne diese Meta-Tags) vornimmt - allerdings funktioniert das nicht. Muss ich da noch eine globale Variable anpassen oder eine Framework-Funktion aufrufen oder ein Skript-Snippet einfügen?

    Vielen Dank schonmal!

  • #2
    Also ich glaube, dass der Thread in dieser Rubrik komplett falsch ist, da es ja nicht um Java geht, sondern um eine WebApp mit HTML5 und JavaScript. Ich hab das Ganze mittlerweile hinbekommen, aber vielen Dank trotzdem.

    Comment


    • #3
      Du hast jetzt nicht so ein Interesse die Lösung für andere darzustellen?

      Das Thema liegt im Android Forum, wie man an der Baumstruktur sieht. Wo sollte es hin?
      Zuletzt editiert von Christian Marquardt; 22.03.2013, 07:43.
      Christian

      Comment


      • #4
        Na, wenn du mich so nett bittest, hier ist die Lösung:

        Code:
        var fixme = function() {
          scroll(0, 0);
        
          var header = $(".header:visible");
          var footer = $(".footer:visible");
          var content = $(".content:visible");
          var viewport_height = $(window).height();
        
          var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
        
          content_height -= (content.outerHeight() - content.height());
          content.height(content_height);
        };
        
        $(document).ready(function() {
          $(window).bind("orientationchange resize pageshow", fixme);
        });
        Funktioniert auf iOS, Android und Windows Phone gleichermaßen.

        Warum ich glaube, dass der Thread hier fehl am Platze ist, liegt doch auf der Hand: Es handelte sich bei meiner Frage nicht um eine systemspezifische Android-Frage, sondern um eine Frage zum Umgang mit Webtechnologien wie HTML, JavaScript und jQuery. Daher hatte ich ja auch in der Rubrik "Web" gepostet.

        Viele Grüße

        Comment

        Working...
        X