Landscape Mode Lock

Saola Animate Support Questions
1

Is there a way to overcome the scaling issue that occurs when forcing landscape mode using a media query?

At the moment, this happens when you rotate a full screen - centred project.

landscape
landscape529×827 52 KB

The CSS is:

@media (orientation: landscape) {
body {
transform: rotate(0deg);
}
}

@media (orientation: portrait) {
body {
transform: rotate(90deg);
}

There is a preview here: https://saola.interaktiv.co.uk/landscape/

2

Hi mackavi,

Saola Animate player assumes that the document is not rotated when updating layout so this issue occurs.
It seems that it’s not possible to overcome it with CSS, but you can use JavaScript as in this sample:

landscape lock.saolapack (2.1 KB)

In the sample above, landscapeLock function is called in the document Ready event to lock the orientation at the beginning, and in Window Resize event to keep it locked when the device orientation changes.
I don’t use Orientation Change event because in this event, the window dimension is the one before rotated. It can make the code confusing.

Regards

3

Hi Toan,

Thanks for the idea. The sample works well and I’ve tried it on a couple of projects without issue. I need to do more testing on different browsers / devices & projects but this could prove to be really useful for my e-learning modules.

Regards,

.