iPhone XS Max Mobile Breakpoint

Feature Requests
1

Hello all,

I’ve stumbled into a bit of problem with iPhone XS Max Portrait mode displaying ads that are not meant for portrait mode. There was an ad I did 600x400 with a second breakpoint of 300x250 for smaller display devices. iPhone XS Max displayed the ad in its entirety in portrait mode of 600x400 which was meant for landscape which is understanble since its packs more pixels but not its earlier predecessors with a smaller resolution display. It be nice if we had mobile breakpoints based on what device(s) and what to show in portrait for that device vs the specifying the dimensions - meaning if there’s a way to force iPhone XS Max to show in portrait mode a 300x250 breakpoint variant?

Safari doesn’t have a tab for iPhone X and XS Max.

05%20PM
Screen Shot 2019-07-18 at 9.21.05 PM.png693×96 64.2 KB

2

Not at my mac at mo,

But wondering if there is a property we can check to size of retina pixels the device is using…

Also I think you can add. You own custom sized devices in the dev

3

@petester you may add the breakpoints you’ve used to your post. Layout dimensions and breakpoints are not the same … necessarily :slight_smile:

4

While I can add a layout size it doesn’t necessarily mean I’d get the layout I’m looking to get when in portrait orientation.

@h_classen I’m not sure what you mean. The underlying issue is not adding breakpoints but forcing a breakpoint to show on a specific device when in portrait but for all other devices it’s fine.

5

You can use JS to force a layout. See Hype LayoutKit (Layout Extension) based on user agent and more stuff you can read out.

6

Thanks Max, would this apply to one device or many display devices? My problem is IPhone XS Max shows 600x400 in portrait orientation when It should be at 300x250 this needs to be forced to 300x250. How does one go about setting it up?

7

You’d look for a JS based rule to identify the devices needed and then you return the layout you want. Look at the example. I can’t write code as I am on the road.

8

may work:

<script>

  function layoutRequest(hypeDocument, element, event) {
   
     if (window.matchMedia("(orientation : portrait) and (device-width : 414px) and (device-height : 896px) and (-webkit-device-pixel-ratio : 3)").matches) {
    hypeDocument.showLayoutNamed('Your_iPhone_XS_max_layout')
  }    
  }

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

 </script>
2 Likes
9

Beware that matchMedia might need a polyfill. Included in LayoutKit. But latest version can also be found here https://www.npmjs.com/package/matchmedia-polyfill for direct usage.

1 Like
10

@petester so it'll be easier for you to use @MaxZieb's extension as a regular basis ... :slight_smile:

1 Like
11

If it needs to be self contained in the ad (meaning without reliance on HTML head then maybe put the code on scene load and trigger/broadcast an resize event window.dispatchEvent(new Event('resize')); manually…

An document loaded function handler in the GUI would be great @jonathan (document panel maybe)

1 Like
12

BTW LayoutKit is not battle tested in the sense that it delegates the rule into hypeDocument and that might not be defined before the first trigger occurs. Best combined with document load therefore. A manual event trigger should solve it or your example combined with the polyfill should be actually good as it does it all in head html. I’ll look into it if there can be a better solution for the future… or anybody else got a great idea?

13

Note that the 8 Plus has the same portrait width of the Xs Max/Xr of 414px, and the iPhone 8 is the same portrait width of the iPhone X at 375px. The devices are strictly taller and the X/Xs/Xs Max use a 3x devicePixelRatio.

I think what @h_classen is asking here is what breakpoint width are you using? As you can use a 300x250 layout but set the breakpoint to be 415px, it would sound like that may satisfy your needs to show a smaller at when the width is smaller than the iPhone X* models?

14

I have 2 layouts 600x400 and 300x250. The max doesn’t change to 300x250 IPhone X does when in portrait.

Would it effect other devices?

15

Ahh that what I was talking about..

Thanks

16

But the question is what are your breakpoint width settings? (See the Layout/Scene Inspector's Responsive Layout section)

Yes, the change at breakpoint width is not device specific. If you want to use the 300x250 layout for everything that is under 600px wide, then you can set the breakpoint widths accordingly.