Scaling problems on the iPad

zeddicus

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?

 

carlfink

What publishing options (e. g. AICC or SCORM)? Responsive design? Can you upload a sample?

zeddicus

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

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

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

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

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

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

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

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

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

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.