Responsive Design iPhone/iPad

Background:

I’ve gotten to the point in developing an application to start fully fleshing out the UI so that it is compatible for iPhone and iPad. At the moment, it only works for iPad and I plan on transitioning to using flexbox, so that that it can fully be responsive to the different sizes. However, I am not sure if there is a way to tell use flexbox differently if it is an iPad compared to an iPhone, as some components need to be rendered differently on a smaller screen compared to a bigger screen. Also, it would be great to hear other methods for making this responsive design compatible for other sized devices in the future as well.

Questions:

  • Is there a way to tell which device is being used in order to display components differently?
  • Is flexbox the best approach to create responsive design (adaptable to different sizes)?
  • Are there any other methods for responsive design that may be better than flexbox?

I’ve used combination of FlexBox, removeFromSide and GridBoxes pretty successfully. I recommend to look into GridItem.withArea( ), it made a lot of things easier for me.

1 Like

If you’re focusing on Apple devices without other platforms (Android/Windows/Linux) it would be better to use other framework for UI.
However, with JUCE you can query the device itself -
https://docs.juce.com/master/classSystemStats.html#a6207099299458ff24641883b01a083e5

One ‘catch’ with responsive iOS support and JUCE is fullscreen.
with Apple introducing ‘the notch’ and the gesture bottom (don’t know its name). JUCE has no simple way of handling this or not having ‘fullscreen’ view.

Thanks for the info! At the moment, I can only run iPhone/iPad simulators, and anytime a try to get the device description, I just get “x86_64” instead of the actual description. Do you know what’s happening here?

Have you find a way to tell an iPhone from an iPad in the simulator?

The approach I’m trying is to check the screen ratio, since almost all iPads are close to 4:3 while all iPhones are close to 16:9… I just do if (width / height > 1.5) then it's an iPhone… but it’s just a guess, the day they make a 16:9 iPad I’m screwed! :laughing:

Even though trying to resize the UI based on the screen aspect ratio isn’t completely pointless, regardless the type of device.