Differentiate the iPhone 7 plus and iPhone XS Max

Hi Guys,

When you design a iPhone-specific responsive page, how to differentiate the iPhone 7 plus and iPhone XS Max? The page height of iPhone 7 plus is shorter than that of iPhone XS Max. Without knowing the difference, it is impossible to put a conditional. Do you have any good idea?

Thank you very much.


They should have different widths

1 Like

They will have different screen widths. That said, I highly discourage developing for specific devices. It’s almost always better to develop from the ground up. Personally, I develop my pages to work at 300px and then work myself up from there.

Below is a standard defined by the Bootstrap library

If you really want to be sure your site looks good on every device, develop for each of these breakpoints. And then resize your window to see what your page looks like in between these breakpoints, you want to make sure that your site looks good enough even when snapping your window to a non standard width on a computer. Or maybe even an uncommon width for smartphones.

Just my suggestion, but I think this will help you develop better websites.



Thank you!

1 Like

Thank you very much!

1 Like