Why are there inconsistencies on my responsive page on screens with the same resolution?

Asked

Viewed 34 times

2

I’m developing a responsive Landing Page. The page behaves as follows:

Larger than 1920px (Has the same root Styling, but center the page to the center);
1920px(root) Full Styled;
1800px Adjusted;
1600px Adjusted;
1450px Adjusted;
1366px Full Styled;
1150px Adjusted;
1000px Adjusted;
900px Adjusted;
800px Full Styled;
760px Adjusted;
600px Full Styled;
520px Adjusted;
420px Adjusted;
320px Full Styled;

My doubt lies in resolution 320px. On my phone (320x570) the page appears as I saw it, but on the phone of a colleague who supposedly has an equivalent resolution the styles behave as if the width was less than 320px. I don’t understand this inconsistency. As it is my first Responsive project I would like to better understand what this happens.

  • 1

    Hello Bruno, maybe we can help you better if you add some of your CSS to the question (especially the part that controls resolutions). Maybe what’s happening is because of some device consideration regarding pixel density per inch, or maybe your colleague’s phone is telling the system a different resolution than the one it has.

  • 1

    Another thing to consider is that CSS usually considers the window size, not the screen resolution... If your colleague’s browser does not occupy the entire screen of your phone, then it will not behave like the style indicated for 320px.

  • I think it was for that very reason... I adjusted the page to 310px and already behaves as it should :)

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.