HTML5-Ausgabe auf mobilen Endgeräten skalieren

Im heu­ti­gen Arti­kel zei­ge ich Ihnen, wie Sie ein­stel­len kön­nen, dass Ihre HTML5-Publikation auf Desktop-Systemen in Ori­gi­nal­grö­ße ange­zeigt und nur auf mobi­len End­ge­rä­ten ska­liert wird.

 

Zu die­sem Artikel

Schwie­rig­keits­grad: Fortgeschritten
Benö­tig­te Zeit: ca. 10 Minuten
Ziel: Sie erfah­ren, wie Sie die Ska­lie­rung nur auf mobi­len End­ge­rä­ten zulassen.

Das Problem

In Captivate kön­nen Sie bei der Ver­öf­fent­li­chung eines klas­si­schen (nicht-responsiven Pro­jekts) in HTML5 optio­nal die Funk­ti­on Ska­lier­ba­rer HTML-Inhalt akti­vie­ren. Je nach Ein­stel­lung errei­chen Sie dadurch fol­gen­des Verhalten:

  • Wenn die Funk­ti­on deak­ti­viert ist: Das Pro­jekt wird immer in 100% Grö­ße ange­zeigt und ska­liert nie. Wenn nicht aus­rei­chend Platz zur Ver­fü­gung steht, muss der Ler­ner scrol­len – so meist auch auf mobi­len Endgeräten.
  • Wenn die Funk­ti­on aktiv ist: Das Pro­jekt passt sich stets auto­ma­tisch an die Grö­ße des Browser-Fensters an. Somit ver­klei­nert sich das Pro­jekt sowohl bei einem klei­nen Browser-Fenster als auch auf einem klei­nen Dis­play (Tablet, Pha­blet, Smart­pho­ne). Aller­dings ver­grö­ßert es sich auch immer und nimmt den maxi­ma­len zur Ver­fü­gung ste­hen­den Platz ein. Somit kann es sein, dass das Pro­jekt ggf. 200% oder 300% der Ori­gi­nal­grö­ße auf einem gro­ßen Bild­schirm erreicht, sodass die Inhal­te unscharf / ver­pi­xelt dar­ge­stellt werden.

Die Lösung

Davon aus­ge­hend, dass Ihre Pro­jekt­auf­lö­sung so kon­zi­piert ist, dass sie auf Desk­tops sowie Lap­tops zu 100% (und damit in Ori­gi­nal­grö­ße und in bes­ter Qua­li­tät) ange­zeigt wer­den kann (z. B. bei einer Auf­lö­sung von 1024 x 640), benö­ti­gen Sie in den meis­ten Fäl­len nur eine Ska­lie­rungs­funk­ti­on für mobi­le Endgeräte.

Im fol­gen­den Work­around zei­ge ich Ihnen, wie Sie den HTML-Code eines bereits ver­öf­fent­lich­ten Captivate-Projekts so ver­än­dern, dass das Pro­jekt mit­tels Abfra­ge (Media Que­ry) nur auf mobi­len End­ge­rä­ten ska­liert, jedoch nicht auf Desk­tops und Lap­tops (mit i. d. R. grö­ße­ren Bildschirmen):

  1. Ver­öf­fent­li­chen Sie Ihr Pro­jekt als HTML5-Projekt. Stel­len Sie dabei sicher, dass die Opti­on Ska­lier­ba­rer HTML-Inhalt akti­viert ist. 

    Unbenannt
    Pro­jekt veröffentlichen
  2. Öff­nen Sie den Veröffentlichungsordner.
  3. Öff­nen Sie die Datei index.html mit einem Text­edi­tor Ihrer Wahl, z. B. Notepad++.
  4. Navi­gie­ren Sie im Code an die Stel­le <script> im Header.
  5. Kopie­ren Sie fol­gen­den Code in die ers­te Zei­le nach dem Tag <script> (die­ser Aus­zug prüft, ob das Aus­ga­be­ge­rät ein mobi­les End­ge­rät ist):
    var isMo­bi­le;
    if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) )
    {
    isMo­bi­le = true;
    }
    else
    {
    isMo­bi­le = false;
    }

    index_html_code
    Ein­ge­füg­ter Auszug
  6. Spei­chern und schlie­ßen Sie die Datei.
  7. Navi­gie­ren Sie in den Unter­ord­ner assets > js.
  8. Öff­nen Sie die Datei CPM.js mit einem Text­edi­tor Ihrer Wahl, z. B. Notepad++.
  9. Suchen Sie nach dem Aus­druck „cp.shouldScale=cp.D.project.shc;“.

    cshouldscale
    Gesuch­ter Ausdruck
  10. Erset­zen Sie den mar­kier­ten Aus­druck durch folgenden:
    if(isMobile)
    {
    cp.shouldScale = cp.D.project.shc;
    }
    else
    {
    cp.shouldScale = false;
    }

    ifismobile
    Ersetz­ter Auszug

Die­ser Aus­druck bezweckt, dass das Pro­jekt nur ska­liert wird, wenn es sich bei dem Aus­ga­be­ge­rät um ein mobi­les End­ge­rät han­delt. Andern­falls wird das Pro­jekt in Ori­gi­nal­grö­ße angezeigt.

  1. Spei­chern und schlie­ßen Sie die Datei.
  2. Tes­ten Sie abschlie­ßend das Ergeb­nis auf ver­schie­de­nen Endgeräten.

Nun soll­te Ihr Pro­jekt nur auf mobi­len End­ge­rä­ten ska­lie­ren, jedoch nicht auf Desk­tops und Laptops.

 

 

 

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

  1. Vie­len Dank für den Tip, der ist Gold wert! 🙂 Mir ist auf­ge­fal­len, dass wohl ein klei­ner Feh­ler in der Anlei­tung ist:

    Punkt10 fehlt imho ein „;“ nach der letz­ten Klam­mer, da das Semi­ko­lon bei Punkt 9 mit mar­kiert ist und man die­sen Bereich ja erset­zen soll. 

    Jeden­falls klapp­te es bei mir nicht, wenn ich kein „;“ am Ende hat­te, mit funk­tio­niert es wie beschrieben!

    Bes­te Grüße!

    1. Hal­lo MaRe,
      wir haben auf Ihren Hin­weis hin das Skript sowohl mit als auch ohne Semi­ko­lon getes­tet und es funk­tio­nier­te in bei­den Fäl­len. Mög­li­cher­wei­se liegt dies an den ver­schie­de­nen Brow­sern, die den Code anders inter­pre­tie­ren. Rein syn­tak­tisch gese­hen, ste­hen jedoch bei JavaScript-Bedingungen mit IF und ELSE nach der geschweif­ten Klam­mer kei­ne Semi­ko­lons mehr.
      Bes­te Grüße
      Das tecwriter-Team

  2. Hmm, ok. Also lokal funk­tio­niert in der Tat bei­des. Im LMS brau­che ich das Semi­ko­lon, zumin­dest im Chro­me (FF stellt es dar). Wie auch immer, haut­p­sa­che es geht. 🙂

  3. Vie­len Dank für den Tipp!

    Gibt es auch eine Mög­lich­keit, die Ska­lie­rung auto­ma­tisch ab einer bestimm­ten Bild­schirm­grö­ße zu aktivieren/deaktivieren?

    Hin­ter­grund: Oft­mals tre­ten bei uns unter­schied­li­che Auf­lö­sun­gen im UN auf. Man­che Mit­ar­bei­ter haben auf ihrem Lap­top mit Citrix-Server-Fenster eine zu gerin­ge „Auf­lö­sung“ für die Publi­ka­ti­ons­grö­ße (iPad 1024×672).

    Gibt es eine Mög­lich­keit bei einer Unter­schrei­tung der Publi­ka­ti­ons­grö­ße die Ska­lie­rung zu aktivieren?

    Vie­le Grüße

    1. Hal­lo Herr Stiegler,
      um dies zu rea­li­sie­ren, müs­sen Sie anstatt dem unter Schritt 10 beschrie­be­nen Code­teil den fol­gen­den Code in die CPM.js einfügen:

      if (isMo­bi­le) {
      cp.shouldScale = cp.D.project.shc;
      } else {
      cp.shouldScale = false;
      window.addEventListener(‚resize‘, resizeWindow);
      }
      func­tion resizeWindow(){
      var brei­te = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
      var hoehe = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

      if((breite 1024 || hoehe 672) && isMo­bi­le == fal­se) { cp.shouldScale = cp.D.project.shc; document.getElementById("main_container").style.top = "0px" }else { cp.shouldScale = fal­se; document.getElementById("main_container").style.top = "0px" }}
      Die­ser Code­teil akti­viert die Ska­lie­rung sobald die Auf­lö­sung von 1024×672 unter­schrit­ten wird.

      Bes­te Grüße
      Das tecwriter-Team

  4. Hal­lo und vie­len Dank für den Lösungsansatz!

    Lei­der funk­tio­niert das beschrie­be­ne Vor­ge­hen bei mei­ner Datei nicht. Muss ich für Ihren Vor­schlag etwas an der Index.html eben­falls ändern? Und müs­sen nach den }} ein ; kommen?

    Nach­dem ich die Codes ent­spre­chend ange­passt habe, lädt mei­ne Datei auf dem LMS nicht mehr.

    VG,
    Marc

    1. Hal­lo zusammen,

      zunächst ein­mal vie­len Dank für den hilf­rei­chen Tipp! Gibt es denn zum aktu­el­len Pro­blem schon eine Lösung?

      Vie­le Grüße

      1. Hal­lo Marc & Jan, 

        vie­len Dank, für Ihre Kom­men­ta­re. Wenn Sie möch­ten, dass die Inhal­te stets ska­lie­ren brau­chen Sie die­sen Code nicht anfü­gen. Stel­len Sie in Captivate dann ein­fach nur Ska­lier­ba­rer HTML-Inhalt ein (Schritt 1). Wie im Arti­kel beschrie­ben, wird die Ska­lie­rungs­funk­ti­on mit unse­rem ergän­zen­den Code auf mobi­le End­ge­rä­te beschränkt (die i.d.R. klei­ne­re Dis­plays haben). Dies ist immer hilf­reich, wenn ich nicht möch­te, dass die Inhal­te auf Desktop- und Laptop-System (u.U. zu groß) skalieren.

        Bes­te Grüße
        Martin Uhrig

  5. Hal­lo,

    vie­len Dank für den wert­vol­len Tipp! Läßt sich die­ser Work­around auch so kon­fi­gu­rie­ren, dass der Inhalt prüft, ob in den Anzei­gen­ein­stel­lun­gen eine Ska­lie­rung von 150% aktiv ist? Der Inhalt soll­te bei 150% ska­lie­ren, bei 100% nicht. Hin­ter­grund ist der, dass der Lern­in­halt auf Desk­tops, Lap­tops und MS Sur­faces ange­zeigt wer­den soll. Dei Prü­fung, ob es sich um mobi­les End­ge­rät han­delt, greift das lei­der nicht….

    Vie­len Dank im Voraus!

    Mit freund­li­chen Grüßen
    Tho­mas Pencs

    1. Hal­lo Thomas,
      lei­der gibt es kei­ne Mög­lich­keit über alle Brow­ser hin­weg die Anzeige- bzw. Zoo­m­ein­stel­lun­gen zuver­läs­sig abzu­fra­gen. Eine Ver­än­de­rung des Zoom­gra­des im Brow­ser kann nur durch den Benut­zer und zu jedem Zeit­punkt durch­ge­führt wer­den. Die oben beschrie­be­ne Lösung wird jedoch immer nur beim Öff­nen des Kur­ses aus­ge­führt. D.h. eine sol­che Lösung wür­de ohne­hin nur in den Fäl­len funk­tio­nie­ren, in denen der Benut­zer den Zoom­grad bereits vor dem Öff­nen des Kur­ses schon ver­än­dert hat. Nach­träg­li­che Ände­run­gen kön­nen mit die­ser Lösung gar nicht abge­fan­gen werden.
      Mit bes­ten Grüßen
      Das tecwriter-Team

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht.