How does adaptive layout?

Quite a long time have been creating websites. Previously created mobile versions for sites decided to switch to the adaptive layout (a long time).
Made a website with breakpoints (media query resolution), but was not sure that, say, smart, or a small tablet physically, but with higher resolution, displays website for mobile devices (breakpoint because the resolution work, or rather, justified). But, to my surprise, displayed smart all right, though, that the resolution is more bearing me breykpointa.
Tell me who in the subject, how does it work? I got smart very smart, or it will at all? Can I make the website only breykpointa, and not be afraid that some pervert on his 5" smart with 1440p resolution, it will show the full version?
July 2nd 19 at 17:09
2 answers
July 2nd 19 at 17:11
Solution
Just except media queries, you pointed out, as they should have been, and even the meta tag viewport and width=device-width in your html. If very roughly, on mobile this tag forces the browser to recalculate all relative to the physical size of the screen (actually the formula with coefficients, relative to the pixel density of this screen), not its resolution, leading to approximately identical results on devices with different pixel density. Thus, if we take your example and add to it the condition that this 5" smartphone a pixel density of 500ppi in the area, then when viewing the page it will turn into 1440px 360px. In short, read about the viewport.
July 2nd 19 at 17:13
Solution
5" smart with 1440p resolution


All a bit wrong.
View: viewportsizes.com size viewports different devices. The viewport is different from the size of the screen in the specifications, is not the same thing.

Try to open https://www.esolutions.se/en-GB/test on their devices.

And as posted make sure you use the meta tag viewport

Find more questions by tags Adaptive design