Display Mobile Compatible when it's on mobile

Question

Please allow me to ask a silly question about Google's site(google.com). I have tested their site with computer browsers and smartphone browsers. Okay! Here is the question that i have, when the time i make the computer browser to a small screen, the layout of Google's site does not fit in a mobile friendly layout. But, it does become mobile friendly layout when it's on mobile screen. But, the url is still same http://www.google.com.

I have tried other site, but other site is using 301 redirect when mobile screen detected and their url will be transferring to mobile url. I am curios about this how can google do this(change the mobile friendly web layout on mobile screen but keep same url). I keep thinking about this question until i can't sleep well. Is there anyone here know what is the trick google use?

Answer 1

This is using Media queries:

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {

}

Check This link for more details

is just css style when the website on mobile, for example you want a div not shown on mobile device you can do this:

@media only screen 
      and (max-width: 480px) {
    .yourdiv{display:none;}
    }

Check this example

Answer 2

Maybe you meant viewport meta tag which fits layout of the page if it mobile device? <meta name="viewport" content="width=device-width">