device-width and device-height

Question

Need help to understand if I have device-width predefined like these:

• Extra small devices Phones (<768px)
• Small devices Tablets (≥768px)
• Medium devices Desktops (≥992px)
• Large devices Desktops (≥1200px)

then how can I know the device-height? Because on one page-site it looks in one way on 768px x 900px and in other way on 768px x 750px.

Hope it makes sense!

Cheers,

Sandra P.

Answer 1

In responsive design, (actually in web design general) manipulating or changing the content or the look of the interface by height is not really recommended.

Users usually does the "scroll down-up" movement when they are browsing a content. This is same in both hand-held devices and desktop computers.

Managing the content via width is a better approach, you don't really need to know the height.

---

I can give a little list of height references, but keep it in mind, since it not really used much, it would not be accurate;

Extra small devices Phones (<640px)
Small devices Tablets (≥640px)
Medium devices Desktops (≥820px)
Large devices Desktops (≥900px)

Also I can highly recommend the responsive test module of the Google Chrome developer tools. Addition to that, there is lots of online apps and kits to test the visual look of your design on different sizes of devices and screen sizes.

---

Note That, using the most popular device screen sizes might be a good approach also.

Here is a list of popular hand-held devices and their heights;

• Apple iPhone 7 - 667px
• Apple iPhone 6 Plus, 6s Plus - 736px
• Apple iPhone 6, 6s - 667px
• Apple iPhone 5 - 568px
• LG G5 - 640px
• LG G4 - 640px
• Samsung Galaxy S7, S7 edge - 640px
• Samsung Galaxy S6 - 640px
• Samsung Galaxy S4 - 640px
• Samsung Galaxy Nexus - 600px
• Samsung Galaxy Note 3 - 640px
• Microsoft Lumia 1020 - 480px
• Microsoft Lumia 925 - 480px
• Motorola Nexus 6 - 690px
• HTC One - 640px
• Sony Xperia Z - 640px

Check this link for all devices and their screen sizes; http://mydevice.io/devices/