Search code examples
cssresponsive-designsmartphonescreen-size

RWD and smartphone's screen x browser window size

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?

EDIT

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.

Solution

  • If you are developing website and you want it to be RWD, you should cover the most of screen like desktops, tablets and mobiles, so the bootstrap media queries can be a good choose for your website, but if you decided to use 640 pixels as the breakpoint between mobile and desktop! then what about other screen size, you probably need some thing like following code to cover most of screens.

    // Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

    But if you looking for specific screen size you can use this link and select what you need from that file.

    The browsersize is tools for testing your web pages with specific size like chrome inspect element responsive tools.

    But the viewport is quick fix for your problem. 

    <meta name='viewport' content='width=device-width, initial-scale=1'>

    A <meta> viewport element gives the browser instructions on how to control the page's dimensions and scaling.

    The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).

    The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser. reference