Under what (resolution) screens should the site be adapted?

Question

Web development

Now all mobile phones (almost) have a screen resolution of 720 × 1280 at 4.7 inches ...
What to focus on and how?
Thank you!

Answer 1

Usually should be 5-7 sizes
1. Smartphone upright (320-400)
2. Smartphone on side (480 - 650)
3. Tablet upright (768)
4. Tablet on side (1024)
5. Desktop (usually 1200 and 1600).
There should be some kind of rubber between these sizes so that the transition is smooth and looks normal on non-standard devices.

Answer 2

Well, I would not count on the fact that ALL mobile phones have such a resolution.
I do it up to a width of 288 px
. I test 10 - 15 modes, for each I make my own media screen with display correction for individual elements. if you rely on popular ones, then cut off some of the users.

@media only screen and (max-width: 990px){	
}
@media only screen and (max-width: 850px){	
}
@media only screen and (max-width: 767px){	
}
@media only screen and (max-width: 566px){	
}
@media only screen and (max-width: 489px){	
}
@media only screen and (max-width: 379px){	
}
@media only screen and (max-width: 339px){	
}
@media only screen and (max-width: 299px){	
}

Answer 3

do not confuse the physical resolution of the device with its logical range, if the screen has a resolution of 1280px, this does not mean that the site will be rendered in this resolution, you need to find out what the device pixel ratio is, as well as meta name=viewport. I myself use requests from 320px to 1200px, with intermediate transition points in the context of the task and aesthetic considerations, I separately write styles for the iPhone 5-6s, due to their exoticism. It should also be remembered that a good adaptive is not only the width, but also the height. Here is a tablet for apple, at one time it helped a lot

Answer 4

I advise you to make the site responsive, then the issue with extensions will disappear by itself.

Answer 5

I divide into 3 parts - desktop, tablet, mobile

Answer 6

minimum 3:
1. Smartphone upright 320
2. Tablet upright (768)
3. Desktop (usually 1200 or 1600).
If everything is on normal grids, then everything will be beautiful)