Mobile settings

Sorry in advance if this is a stupid question.
I am trying to understand how a Hype graphic works with a mobile version included in the layouts section of Hype.
When I make a graphic at 900 px wide and export it to html the div container settings look like this:
(width in the embed code is 900px wide)

But after I add the mobile layout it changes the same embed code to this:
(width in the embed code is 320px wide)

Why is the main div the mobile size? Where in the code does the change happen when it hits the breakpoint? Is this something that Hype exports in the javascript? The reason I want to know is that I am stacking several graphics on top of each other into a div wrapper as the files are taxing my graphics card while all in one piece. I am wondering where I can tinker with the final code for this in case I run into issues.

I just want to understand how it works. (also by the way I don't want to make it responsive.
The graphic is too complicated to be pinning and expanding elements)

1 Like

Seems confusing but in a mobile first world it might not. The container dimensions is anyway dynamically adjusted by Hype while switching layouts.

Hype uses a single div for all its contents. The Hype runtime has code that looks at its container size (or the window size) to determine which layout to choose. All of this is done in JavaScript, and all on the fly - if you change a browser window size it will change the layout. As part of the change operation, it will change the DOM values of the *_hype_container's width and height. You can see this if you inspect the element with your browser's developer tools. Those HTML values are not static.

Currently, the Hype runtime only listens to the resize and pageshow events to decide if it needs to change layouts. If you resize its container manually, then you should use the hypeDocument.relayoutIfNecessary() API to inform Hype to redo its layout.

Hype also provides layout functions API to hook into the layout system and make changes to the displayed layout if you want.

It is relatively arbitrary which layout sizes we choose to write to the HTML file, since it will change when the document is loaded. Hype v3 used the largest scene's size, but we changed this in Hype v4 for some reason... I think it had to do with Poster Image support or maybe fitting better WordPress blogs. It doesn't seem like you need to, but should it become necessary you can get back to v3's behavior via this command in the Terminal.app:

defaults write com.tumult.Hype4 exportLargestSceneAsFirst -bool YES

I hope that helps explain the layout system!

3 Likes

Nice, another one I just added it to the list:

Export the largest scene first

2 Likes

Thanks folks, sorry for the delay responding! Other challenges got in the way.
I really appreciate you taking the time to answer my question. I am still working through the bugs on this. Best, Tammy

1 Like