How to make adaptive on phones with a high screen resolution?

Question

css

There is an adaptive site makeuphouse.ru
There are 6 iPhones with a resolution of about 1000 pixels and, accordingly, it looks like it should at 1000 pixels, that is, everything is small.
But for some reason, not all adaptive sites behave the same way, for example, lp.tandem.by on an iPhone is displayed with a minimum width, i.e. 470 pixels. How can I do the same?

Answer 1

Magic

meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Well, individual styles@media only screen and (max-width:1000px)

Answer 2

As Alexei wrote above, connect the meta tag, but the iPhone resolution needs to be divided by two, since this is a retina screen and you will have less physical resolution. Width, if I'm not mistaken, 375 pixels. Bootstrap for example offers media for smartphones at max-width:767px

Answer 3

For retina, you need to write the following media query -

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
 /* Ваш css код */
}