Jump to content

What are the best media query?

Recommended Posts



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) {

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


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
Link to post
Share on other sites

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



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.

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.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...