HTML5-Ausgabe auf mobilen Endgeräten skalieren

Im heutigen Artikel zeige ich Ihnen, wie Sie einstellen können, dass Ihre HTML5-Publikation auf Desktop-Systemen in Originalgröße angezeigt und nur auf mobilen Endgeräten skaliert wird.

 

Zu diesem Artikel

Schwierigkeitsgrad: Fortgeschritten
Benötigte Zeit: ca. 10 Minuten
Ziel: Sie erfahren, wie Sie die Skalierung nur auf mobilen Endgeräten zulassen.

Das Problem

In Captivate können Sie bei der Veröffentlichung eines klassischen (nicht-responsiven Projekts) in HTML5 optional die Funktion Skalierbarer HTML-Inhalt aktivieren. Je nach Einstellung erreichen Sie dadurch folgendes Verhalten:

  • Wenn die Funktion deaktiviert ist: Das Projekt wird immer in 100% Größe angezeigt und skaliert nie. Wenn nicht ausreichend Platz zur Verfügung steht, muss der Lerner scrollen – so meist auch auf mobilen Endgeräten.
  • Wenn die Funktion aktiv ist: Das Projekt passt sich stets automatisch an die Größe des Browser-Fensters an. Somit verkleinert sich das Projekt sowohl bei einem kleinen Browser-Fenster als auch auf einem kleinen Display (Tablet, Phablet, Smartphone). Allerdings vergrößert es sich auch immer und nimmt den maximalen zur Verfügung stehenden Platz ein. Somit kann es sein, dass das Projekt ggf. 200% oder 300% der Originalgröße auf einem großen Bildschirm erreicht, sodass die Inhalte unscharf / verpixelt dargestellt werden.

Die Lösung

Davon ausgehend, dass Ihre Projektauflösung so konzipiert ist, dass sie auf Desktops sowie Laptops zu 100% (und damit in Originalgröße und in bester Qualität) angezeigt werden kann (z. B. bei einer Auflösung von 1024 x 640), benötigen Sie in den meisten Fällen nur eine Skalierungsfunktion für mobile Endgeräte.

Im folgenden Workaround zeige ich Ihnen, wie Sie den HTML-Code eines bereits veröffentlichten Captivate-Projekts so verändern, dass das Projekt mittels Abfrage (Media Query) nur auf mobilen Endgeräten skaliert, jedoch nicht auf Desktops und Laptops (mit i. d. R. größeren Bildschirmen):

  1. Veröffentlichen Sie Ihr Projekt als HTML5-Projekt. Stellen Sie dabei sicher, dass die Option Skalierbarer HTML-Inhalt aktiviert ist.

    Unbenannt
    Projekt veröffentlichen
  2. Öffnen Sie den Veröffentlichungsordner.
  3. Öffnen Sie die Datei index.html mit einem Texteditor Ihrer Wahl, z. B. Notepad++.
  4. Navigieren Sie im Code an die Stelle <script> im Header.
  5. Kopieren Sie folgenden Code in die erste Zeile nach dem Tag <script> (dieser Auszug prüft, ob das Ausgabegerät ein mobiles Endgerät ist):
    var isMobile;
    if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) )
    {
    isMobile = true;
    }
    else
    {
    isMobile = false;
    }

    index_html_code
    Eingefügter Auszug
  6. Speichern und schließen Sie die Datei.
  7. Navigieren Sie in den Unterordner assets > js.
  8. Öffnen Sie die Datei CPM.js mit einem Texteditor Ihrer Wahl, z. B. Notepad++.
  9. Suchen Sie nach dem Ausdruck „cp.shouldScale=cp.D.project.shc;“.

    cshouldscale
    Gesuchter Ausdruck
  10. Ersetzen Sie den markierten Ausdruck durch folgenden:
    if(isMobile)
    {
    cp.shouldScale = cp.D.project.shc;
    }
    else
    {
    cp.shouldScale = false;
    }

    ifismobile
    Ersetzter Auszug

Dieser Ausdruck bezweckt, dass das Projekt nur skaliert wird, wenn es sich bei dem Ausgabegerät um ein mobiles Endgerät handelt. Andernfalls wird das Projekt in Originalgröße angezeigt.

  1. Speichern und schließen Sie die Datei.
  2. Testen Sie abschließend das Ergebnis auf verschiedenen Endgeräten.

Nun sollte Ihr Projekt nur auf mobilen Endgeräten skalieren, jedoch nicht auf Desktops und Laptops.

 

 

 

11 Gedanken zu „HTML5-Ausgabe auf mobilen Endgeräten skalieren“

  1. Vielen Dank für den Tip, der ist Gold wert! 🙂 Mir ist aufgefallen, dass wohl ein kleiner Fehler in der Anleitung ist:

    Punkt10 fehlt imho ein “;” nach der letzten Klammer, da das Semikolon bei Punkt 9 mit markiert ist und man diesen Bereich ja ersetzen soll.

    Jedenfalls klappte es bei mir nicht, wenn ich kein “;” am Ende hatte, mit funktioniert es wie beschrieben!

    Beste Grüße!

    Antworten
    • Hallo MaRe,
      wir haben auf Ihren Hinweis hin das Skript sowohl mit als auch ohne Semikolon getestet und es funktionierte in beiden Fällen. Möglicherweise liegt dies an den verschiedenen Browsern, die den Code anders interpretieren. Rein syntaktisch gesehen, stehen jedoch bei JavaScript-Bedingungen mit IF und ELSE nach der geschweiften Klammer keine Semikolons mehr.
      Beste Grüße
      Das tecwriter-Team

      Antworten
  2. Hmm, ok. Also lokal funktioniert in der Tat beides. Im LMS brauche ich das Semikolon, zumindest im Chrome (FF stellt es dar). Wie auch immer, hautpsache es geht. 🙂

    Antworten
  3. Vielen Dank für den Tipp!

    Gibt es auch eine Möglichkeit, die Skalierung automatisch ab einer bestimmten Bildschirmgröße zu aktivieren/deaktivieren?

    Hintergrund: Oftmals treten bei uns unterschiedliche Auflösungen im UN auf. Manche Mitarbeiter haben auf ihrem Laptop mit Citrix-Server-Fenster eine zu geringe “Auflösung” für die Publikationsgröße (iPad 1024×672).

    Gibt es eine Möglichkeit bei einer Unterschreitung der Publikationsgröße die Skalierung zu aktivieren?

    Viele Grüße

    Antworten
    • Hallo Herr Stiegler,
      um dies zu realisieren, müssen Sie anstatt dem unter Schritt 10 beschriebenen Codeteil den folgenden Code in die CPM.js einfügen:

      if (isMobile) {
      cp.shouldScale = cp.D.project.shc;
      } else {
      cp.shouldScale = false;
      window.addEventListener(‘resize’, resizeWindow);
      }
      function resizeWindow(){
      var breite = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
      var hoehe = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

      if((breite < 1024 || hoehe < 672) && isMobile == false) { cp.shouldScale = cp.D.project.shc; document.getElementById("main_container").style.top = "0px" }else { cp.shouldScale = false; document.getElementById("main_container").style.top = "0px" }}
      Dieser Codeteil aktiviert die Skalierung sobald die Auflösung von 1024×672 unterschritten wird.

      Beste Grüße
      Das tecwriter-Team

      Antworten
  4. Hallo und vielen Dank für den Lösungsansatz!

    Leider funktioniert das beschriebene Vorgehen bei meiner Datei nicht. Muss ich für Ihren Vorschlag etwas an der Index.html ebenfalls ändern? Und müssen nach den }} ein ; kommen?

    Nachdem ich die Codes entsprechend angepasst habe, lädt meine Datei auf dem LMS nicht mehr.

    VG,
    Marc

    Antworten
      • Hallo Marc & Jan,

        vielen Dank, für Ihre Kommentare. Wenn Sie möchten, dass die Inhalte stets skalieren brauchen Sie diesen Code nicht anfügen. Stellen Sie in Captivate dann einfach nur Skalierbarer HTML-Inhalt ein (Schritt 1). Wie im Artikel beschrieben, wird die Skalierungsfunktion mit unserem ergänzenden Code auf mobile Endgeräte beschränkt (die i.d.R. kleinere Displays haben). Dies ist immer hilfreich, wenn ich nicht möchte, dass die Inhalte auf Desktop- und Laptop-System (u.U. zu groß) skalieren.

        Beste Grüße
        Martin Uhrig

        Antworten
  5. Hallo,

    vielen Dank für den wertvollen Tipp! Läßt sich dieser Workaround auch so konfigurieren, dass der Inhalt prüft, ob in den Anzeigeneinstellungen eine Skalierung von 150% aktiv ist? Der Inhalt sollte bei 150% skalieren, bei 100% nicht. Hintergrund ist der, dass der Lerninhalt auf Desktops, Laptops und MS Surfaces angezeigt werden soll. Dei Prüfung, ob es sich um mobiles Endgerät handelt, greift das leider nicht….

    Vielen Dank im Voraus!

    Mit freundlichen Grüßen
    Thomas Pencs

    Antworten
    • Hallo Thomas,
      leider gibt es keine Möglichkeit über alle Browser hinweg die Anzeige- bzw. Zoomeinstellungen zuverlässig abzufragen. Eine Veränderung des Zoomgrades im Browser kann nur durch den Benutzer und zu jedem Zeitpunkt durchgeführt werden. Die oben beschriebene Lösung wird jedoch immer nur beim Öffnen des Kurses ausgeführt. D.h. eine solche Lösung würde ohnehin nur in den Fällen funktionieren, in denen der Benutzer den Zoomgrad bereits vor dem Öffnen des Kurses schon verändert hat. Nachträgliche Änderungen können mit dieser Lösung gar nicht abgefangen werden.
      Mit besten Grüßen
      Das tecwriter-Team

      Antworten

Schreibe einen Kommentar

Webinar: Das neue Adobe Captivate (12)

Entdecken Sie mit uns die Highlights des neu entwickelten Adobe Captivate. Wir zeigen Ihnen wie Sie schnell und einfach interaktive responsive E-Learnings erstellen können.

Newsletter abonnieren

Automatisch über neue Captivate-Versionen, Updates und neue Bücher informieren lassen:

Kommende Trainings

Keine Veranstaltung gefunden