Nic727 Posted October 8, 2018 Share Posted October 8, 2018 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 Link to comment Share on other sites More sharing options...
Ingolme Posted October 8, 2018 Share Posted October 8, 2018 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. 1 Link to comment Share on other sites More sharing options...
Nic727 Posted October 8, 2018 Author Share Posted October 8, 2018 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. Link to comment Share on other sites More sharing options...
Ingolme Posted October 8, 2018 Share Posted October 8, 2018 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 comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now