How to preview different device sizes/ screen sizes/ breakpoint/ media queries

This topic contains 2 replies, has 2 voices, and was last updated by  HenrikZ 2 months, 3 weeks ago.

Author Posts

HenrikZ

Hi there,

I do not understand why the MT view of my mobile media query is not the same as the resolution of my phone. There must be something that I do not understand, and I am eager to understand it.

The resolution of my phone is 720×1512 (it is a Motorola Moto G7 Play).

I have defined the mobile media query as 720 (see below).

What MT displays as the mobile view (see jaribisha.dk/screenshots/MT-showing-small-screen-at-720.png (this and other screenshots will be removed at a later date)) is very different from what my phone shows (see http://jaribisha.dk/screenshots/screenshot-from-phone-with-resolution-720×1512.png).

On the other hand, the Beaver Builder responsive editing view (see http://jaribisha.dk/screenshots/BB-responsive-editing-phone.png) is very similar to what I see on my phone. If I reduce the width of MT to 370 px (see http://jaribisha.dk/screenshots/MT-showing-370.png) it is very similar to my phone and the Beaver Builder responsive editing view.

I these use the following mobile-first media queries:

— Default screen width for “All Devices” tab 720
— Tablet screen width: larger than (min-width) 752 (Site preview width / builder sync 992 px which is just before it goes into desktop) @media (min-width: 752px)
— Desktop screen width: larger than (min-width) 993. (Site preview width / builder sync 1200 px which is my defined max row width) @media (min-width: 993px)


Sebastian

Hey Henrik,

Screen sizes and resolutions are two different things. The number of pixels in a given screen size determines low or high resolution. This article explains things well: https://buildfire.com/screen-size-resolution-importance/

The best approach with responsive design is to cater for the full range of screen sizes. Not to target individual phones, tablet, or desktop, as they all differ in size and resolution.

When using mobile-first, start with 360px on the All Devices tab, then add extra queries when the layout needs to change. Ideally you won’t have more than 5 media query tabs. Because by using fluid layouts rather than setting dimensions in fixed pixel units, your layouts will have a degree of elasticity. So they look good across a range of screen sizes until you identify a key breakpoint, when things need to change e.g. switch from one to two columns.

I hope that helps!

Cheers,
Sebastian


HenrikZ

Hi Sebastian,

Thanks for the explanation. It makes sense. I had the feeling it had something to do with that. Now I understand more and I can act with that knowledge!

Have a nice day!
Henrik

You must login or register to reply to this topic.