Jump to content
Sign in to follow this  
Nic727

What are the best media query?

Recommended Posts

Hi,

 

What are the best media query to fully support normal desktop and laptop, tablets and phone?

For now I always went with what I was feeling would be ok by figuring how it works by resizing my browser, but with a single live testing on my iPhone 8, I saw that it wasn't working. I don't really know why. Now mobile screens have almost the same resolution as desktop PC and it's hard to only use media query. For example, I use that to remove the white borders around my home screen here http://nicolas-duclos.com and my iPhone 8 show as a 750px width, but

@media only screen and (max-width: 860px) {
    .home-border{
        display:none;
    }
}

it doesn't work.

1538959325-file1.png

I don't really know why the white border is still here and why the text is so small. It's 25px for my title and on my desktop for testing it look so big and horizontal screen too, but on vertical position text look smaller.

1538959328-file.png

Also, now there are lot of phones of different size on the market, what are the best way to support phone size without breaking tablets and desktop/laptop?

What are the best media query to use?

 

Thank you

 

Share this post


Link to post
Share on other sites

All phones have a device-independent resolution smaller than 768 pixels, even if their physical resolution is much higher. You must use a meta viewport tag in order to get the phone to use its device-independent resolution.

  • Like 1

Share this post


Link to post
Share on other sites

Ok thank you. It worked. I will do more testing.

https://www.w3schools.com/css/css_rwd_viewport.asp

 

But what do you mean by device-independent resolution smaller than 768px?

From what I saw, from the apple website, my device has a 750px width, but without the meta tag, it's like if it is a 1080px width and 1920px height. Just weird, but thank you for the tips. I will use that more often in my project since it's saving lot of times and a better use of media queries.

Share this post


Link to post
Share on other sites

The phone's resolution is actually 1080x1920, but the viewport tag tells it to pretend that its resolution is smaller so that things are easier to see. This is called a device-independent resolution, because regardless of which device the user is seeing, the things have approximately the same apparent size.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×