CODEWITHSUNDEEP
htmlcss
Vikrant m
Vikrant m

Reputation: 25

Mobile browser initialising different width

So guys I have been working on a responsive website for some time now. I have the layout sorted now and also the content, so I decided to add breakpoints to the website and using media queries adjust the elements accordingly. So I know that breakpoints must be added based on when the layout starts to break and not on the popular screen resolutions, but when I tested the website on the android version of Firefox on my Moto X(2013), my phone has a resolution of 1280x720 pixels but when I add a breakpoint at let's say 700 pixels using the min-width query, it doesn't affect the page but when I change the same query for a min-width of 980 pixels, it works. Now my question is: isn't it supposed to trigger on the actual resolution or do browsers render it differently? BTW I am talking about the portrait orientation.

Upvotes: 1

Views: 44

Answers (1)

xzegga
xzegga

Reputation: 3139

Resolution is different of aspect ratio, I will recommended you include aspect ratio in you media queries to achieve your goal, see this video to understand differences between aspect ratio and resolutions

Resolution and Aspect Ratio Explained

You can build your media query like this:

    @media only screen and (device-width: 320px) and (device-height: 768px) and (-webkit-device-pixel-ratio: 2){
            .your_css_classes{}
    }

Upvotes: 1

Related Questions