How to make breakpoints height ?

Responsive Responsive Layouts
1

Hello, need help

I want to make a simple html5 application for ios, and to adapt the layout for iPhone 6 (375x667) and iPhone X (375x812) separately.

Please tell me, is it possible to do breakpoints height for responsive layout?

2

There are no responsive height breakpoints. There are two solutions that might work:

  1. You can use the Flexible Layout system to make elements change in their position/size to account for the difference
  2. You can write javascript code that uses the HypeLayoutRequest to determine which Layout to choose. There are examples searching for that term on the forums and a few threads that might be useful to start with since some folks have put in work to make this easier:
3

Thanks for the answer.
I know about the first option, if I can not master the second option, I will return to it.
But the second option is unfortunately too complicated for me.

I have been researching Hype for only three days, and don’t understand where to embed Javascript in the head html, or in the Scene inspector?

I tried the option iPhone XS Max Mobile Breakpoint - #8 by h_classen
I changed so

<script>

  function layoutRequest(hypeDocument, element, event) {
   
     if (window.matchMedia("(min-width : 812px)").matches) {
    hypeDocument.showLayoutNamed('iPhone_X')
  }    
  }

  if("HYPE_eventListeners" in window === false) {
    window.HYPE_eventListeners = Array();
  }
  window.HYPE_eventListeners.push({"type":"HypeLayoutRequest", "callback":layoutRequest});

</script>

TestRes.hype.zip (25.5 KB)

If you show a little pity and patience, I will be very grateful :pray:

4

The Head HTML as you have it is correct; this is a "global" callback that will happen for every scene so it should be in a context that will always be able to be called.

You're quite close; the layoutRequest callback just needs to know a layout name, so change this line:

hypeDocument.showLayoutNamed('iPhone_X')

to instead be:

return 'iPhone_X';

You'll probably also want to change the media query from (min-width : 812px) to (max-width : 375px) and (min-height : 812px)

1 Like