Scaling problems on the iPad

zeddicus
zeddicus Community Member Posts: 7
I have published the title with the option "Scale contents to fill the window" selected with Lector v1.7.3. Works great on stationary or Android devices, but there are some problems on the iPad. The content is not scaled. The course is larger than the space available on the iPad, so most of the course content is outside from the screen. I checked this on Moodle and Scorm Cloud and in both cases this problem occurs. Selecting the option "Adjust content to width" does not change anything.

It is very important for us to correctly scale the course on all devices. This stops our project from being released. Does anyone have any solution to this problem?

 

Comments

  • carlfink
    carlfink Community Member Posts: 1,102 ✭ Legend ✭
    What publishing options (e. g. AICC or SCORM)? Responsive design? Can you upload a sample?
  • zeddicus
    zeddicus Community Member Posts: 7
    It's standard Lectora title with unselected responsive design option. I only want to scale so that the course adapts to the available browser area of ​​any device and resolution.
    Option "Scale contents to fill the window" in publishing window (Scorm 1.2) works quite well but not on iOS.

    It is a complex project and modifying it in three different views could be time-consuming. Therefore, scaling is the optimal way.
  • zeddicus
    zeddicus Community Member Posts: 7
    I also checked it in the responsive course made in the Lectora 18 demo. The problem is the same. The course does not adjust to the space provided by, for example, the Moodle LMS. I have analyzed Lectora code and I think the problem lies in the findWH() function. This line does not perform:
    if(is.iOS && (navigator.userAgent.indexOf('CellCast-iPad') != -1 || navigator.userAgent.indexOf('CellCast-iPhone') != -1) ) winW = getScreenWidth();
    I added this code in this place:
    if(is.iOS) {
    winW = getScreenWidth();
    winH = getScreenHeight();
    }
    
    Works better, but only if the course is opened in a new window. The embedded course still misses the available width.
    Has anyone encountered a similar problem and has a solution for it?
  • carlfink
    carlfink Community Member Posts: 1,102 ✭ Legend ✭
    I'm digressing a bit, but without actually looking at the code myself I have to wonder: when will
    winW = getScreenWidth();
    not be correct? That is, why is that special-cased for iOS above? I see why it's wrong for embedded (the course is only taking up part of the window) but that is not iOS specific.
  • zeddicus
    zeddicus Community Member Posts: 7
    This unfortunately requires a detailed analysis of the Lectora code. From what I was able to determine, a small change in the findWH function helped a bit as I mentioned earlier. This function is on every page and looks like this:
    function findWH(){ //echo LD-769
    if (is.ie9) {
    var vScrollAdj = (is.ns ? 16 : 20);
    winW = (is.ns) ? window.innerWidth - vScrollAdj : document.body.offsetWidth;
    winH = (is.ns) ? window.innerHeight : document.body.offsetHeight;
    }
    else if (is.ie) {
    winW = Math.max(Math.max(getDisplayDocument().body.scrollWidth, getDisplayDocument().documentElement.scrollWidth)-16,
    Math.max(getDisplayDocument().body.offsetWidth, getDisplayDocument().documentElement.offsetWidth)-16,
    Math.max(getDisplayDocument().body.clientWidth, getDisplayDocument().documentElement.clientWidth)-16 );
    winH = Math.max(Math.max(getDisplayDocument().body.scrollHeight, getDisplayDocument().documentElement.scrollHeight)-16,
    Math.max(getDisplayDocument().body.offsetHeight, getDisplayDocument().documentElement.offsetHeight)-16,
    Math.max(getDisplayDocument().body.clientHeight, getDisplayDocument().documentElement.clientHeight)-16 );
    }
    else
    {
    winW = getDisplayDocument().documentElement.clientWidth ? getDisplayDocument().documentElement.clientWidth : getDisplayDocument().body.clientWidth;
    if(is.iOS && (navigator.userAgent.indexOf('CellCast-iPad') != -1 || navigator.userAgent.indexOf('CellCast-iPhone') != -1) )
    winW = getScreenWidth();
    winH = getDisplayDocument().documentElement.clientHeight ? getDisplayDocument().documentElement.clientHeight : getDisplayDocument().body.clientHeight;
    }
    }

    The line with iOS did not execute on the iPad. That's why I changed it a bit and it helped, but it's still not enought in the case of the embedded course. The getScreenWidth() function is in the trivantis.js file, but I have not yet dug up to the place that needs to be improved.
  • carlfink
    carlfink Community Member Posts: 1,102 ✭ Legend ✭
    This is sort of my problem with Lectora not really exposing its API in a coherent, documented, consistent manner. If it were possible to retrieve the name of the course element (window or Div or iFrame or whatever) you could use the jQuery width() and height() methods to get/set its size. I don't know of any easy way to do that in reality, though.
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916 ☆ Roadie ☆
    Alas this is a long-existing issue, mentioned often to Trivantis and they still didnot fix it. I tried to fix it in the past. What i can remember out of the blue is that it is caused by the 'initial-scale=1.0' setting. I am not quite sure what the problem was, but when you change that 'initial-scale' value for iPad to 0.8 or some like that, it fits nicely. To fix this i tried overriding parts of Trivantis code, on Lectora desktop this works, on Lectora Online this fails... you cannot override default Trivantis JS-files...this also is know by Trivantis and not picked up...

    Kind regards,
    Math
  • zeddicus
    zeddicus Community Member Posts: 7
    In a word, trivantis does not support iOS for scaling or responsive courses, and does not say anything about it ...
    I was looking for a place where initial-scale is set but I did not find it. Can you tell me which functions have you overrided?
    I can not deal with it, and this is a critical option for the project to be completed. I have already crossed the deadline and it's too late to change the software.
    The key is to detect the available space for the iframe in which the lectora is embedded. He picks up the screen size but not the iframe. Maybe it's possible to try after the iframe ID created by lms, but in other lms it may be different so it's risky.
  • mnotermans5114
    mnotermans5114 Community Member Posts: 916 ☆ Roadie ☆
    I have to search too. Solution in the end we used was disabling views . Im not 100% sure but do think it fits better on IOS when the views are disabled. When i got some spare time i will search whether i can find the spot were  initial scale is set alas im quite busy atm.
  • tea
    tea Community Member Posts: 128
    Hi zeddicus, we did have a couple fixes related to scaling with iOS in our v18 but it sounds like you are still seeing an issue with with your title, as well as one or more of the the sample templates we provide.

    To help us try to recreate your scaling issue, can you tell me 1) which of the sample templates did you use, 2) did you have all of the views except Desktop turned off, and 3) can you also provide a screen shot of your HTML publish options?
  • zeddicus
    zeddicus Community Member Posts: 7
    Math - If you find something, I will be grateful for the hint.
    tea - I did not use any sample template. I always start with a blank design. This project was made in Lectora 17, and there is no option to disable views. Besides, in this project, only scaling option is important. I don't want to enable responsive option.
    I also did some tests in lectora 18 and regardless of the settings, the course is always bigger than it should in the lms. I did not disable any views in the responsive mode during these tests. I am sending screen shots of settings from three different test cases.
    In summary, the most important thing is to make settings from test1 screenshots to start working properly in Lectora 17 (scaling without responsive). Now the result in Lector 17 and 18 is the same.
    It's ok if I will have to add some changes in published course files. This course must start working as soon as possible.
    It will be great if you can help me with that.