I’m developing a site with Responsive Web Design (RWD). I decided to use 640 pixels as the breakpoint between mobile and desktop, as this site appears to do (as can be seen when resizing the browser on PC). However, when using this site to measure the screen in my smartphone, I get the following properties:
Browser window size: 980 x 1392 Screen size: 360 x 640
Somehow the browser window gets much bigger than the screen, and the website appears as if on a desktop. It seems I need
Browser window size to be about the same as
Screen size, so that the “small version” of the site appear on the smartphone. How do I achieve that?
After I added
<meta name='viewport' content='width=device-width, initial-scale=1'>
to the code, the page appeared correctly in the smartphone’s browser. However, I still don’t understand why
browsersize.com returns a browser window size so larger than the screen size.