Need help to understand if I have device-width predefined like these:
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.
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;
Check this link for all devices and their screen sizes; http://mydevice.io/devices/
height does not matter.set height:auto to the html body content,based on width we can align the components in the html body content.
test responsive website: https://developers.google.com/web/tools/chrome-devtools/iterate/device-mode/?hl=en
orientationin media queries. For example@media screen and (orientation: landscape) { ... }. Is that what you are looking for/asking? Also, don't make use ofdevice-widthin your media queries. You probably wantwidthinstead.