How to change desktop scaling by editing the CSS directly

Question

Hi, I have a couple of In5 projects where the original InDesign file has been lost. Is there a way to change the scaling by doing a find and replace in the CSS? I'd like to change it to 'best fit' if possible.

Thanks in advance

Answer 1

You can try editing assets/js/in5.config.js, but no guarantees as this setting may get applied to multiple aspects of the output.

look for var scaleMode = and set it to

var scaleMode = 'best';

Comments

Thanks Justin, I'll give that a try

Answer 2

Instead of changing the code (scaling is mainly the JavaScript with transitions in the CSS), try embedding your original output in another document using the in5 Web Content interactive widget and export that new document with 'best fit' applied:

1. Make this document the same size as your other document.
2. Make a rectangle.
3. With the rectangle selected, go to in5 > Interactive Widgets > Web Content.
4. Either enter the URL of the content (if it's already online) or navigate to the index.html file of your html5_output folder on your local hard drive.
5. Set Mobile Device Viewport Zoom to Use Desktop Scaling and Desktop Scaling to Best Fit when you export (in5 > Export HTML5 with in5...).

Comments

That's a great idea, thanks Myra!

---

I'm so glad I could help. :)

---

Hi Myra,

That idea worked perfectly in Chrome but not at all in Safari unfortunately. Here's a link to the page:

https://www.design400.net/mew/#p=4

Actually I'm having other issues with Safari as well--my triangle buttons are jagged in Safari 18.0 on Sequoia 15.0.1, and there's a golf ball movie that should play with the intro to my quiz that isn't starting. Everything is great in Chrome and Edge on Mac.

I made all of this in In5, so I'm hoping there is a solution. I'm thankful for any thoughts you might have.

Maurice