The rel="alternate" combined with max-width:640px is informing Google that the page is designed for mobiles and has a max-width of 640px, so Google may prefer other sites based on the users screen resolution. Ideally you should avoid using m.example.com at all costs if at all possible and use responsive design. Below is some information about responsive design and the devices you should expect. Mobiles phones are close to becoming the same resolution as tablets and ultrabook laptops.
The code media="only screen and (max-width: 640px)" is to set css instructions for devices from 1px up to 640px. Nowadays 640px is very common but 1080px will soon to become the most popular. Over the next coming years phones will start to use closer to tablet resolutions. Below is a summary of just some of the most popular phones and the resolutions they use, bare in mind that the width may be increased when the phone is in landscape view.
- Apple iPhone 3GS uses width 320px
- Apple iPhone 4 uses width 640px
- Apple iPhone 5 uses width 640px
- Apple iPhone 6 uses width 1080px
- Samsung Galaxy S3 uses width 720px
- Samsung Galaxy S4 uses width 1080px
- Samsung Galaxy S5 uses width 1080px
- Samsung Galaxy S6 will use above width 1440px
Generally you will want to use something like:
/* max-width 640px old mobile phones */
@media only screen and (max-width: 40em) { }
/* min-width 641px and max-width 1024px, newer phones and tablets */
@media only screen and (min-width: 40.063em) and (max-width: 64em) { }
/* min-width 1025px and max-width 1440px Tablets, Desktops, Laptops and newer Phones */
@media only screen and (min-width: 64.063em) and (max-width: 90em) { }
/* Large Desktop, Laptops, Tablets and TV's max width 1441px, */
@media only screen and (min-width: 90.063em) { }
So to ensure that your website is usable in most if not all resolutions your design should use max-widths and floats. For example a page will more than likely not have a sidebar on a mobile version so you'd use max-width:100% on elements, for example:
HTML
<div>
<div>Left Box</div>
<div>Right Box</div>
</div>
CSS
div {width:100%;}
div div{height:200px;float:left;color:#fff;}
div div:nth-child(1){background:red;}
div div:nth-child(2){background:black;}
@media only screen and (max-width: 40em) {
div div{width:100%;}
}
@media only screen and (min-width: 40.063em) {
div div{width:50%;}
}
You can see this example in action on my JSFiddle, resize the viewpoint by resizing the browser window.
