What are the best media query?

[Nic727]

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.

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.

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

 

[Ingolme]

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.

[Nic727]

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.

[Ingolme]

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.