2

In this Annotations for desktop and mobile URLs I'm curious if the

media="only screen and (max-width: 640px)

is fixed irrespective of the width of the mobile device.

In another words is the 640px fixed that everyone should use on all such pages?

EDIT: With my site using media=...(max-width:640px) as above, I've tried searching in Google with phrase "keyword www.mysite.com" on Opera mobile simulator Sony Experia SL (HD Portrait 720x1280) and my desktop page version contain this line: `

<link rel="alternate" media="only screen and (max-width: 640px)"` href="http://m.example.com/page-1" >

Despite the mobile device width larger than 640px, Google is listing my site's mobile pages in the SERP.

Opera mobile simulator settings

1

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.

  • bybe I've updated my question – user5858 Mar 25 '15 at 17:37
  • And how many weeks have you waited for these changes to take place? – Simon Hayter Mar 25 '15 at 21:44
  • A week only. There was no mobile(m.*) version of my site. Around a week ago only I'd launched it. – user5858 Mar 26 '15 at 6:15
  • bybe here is my site: bit.ly/Y3gEm1. Search in Google using something like: "government job site:mysite.com" on a device with higher width than 640px. – user5858 Mar 27 '15 at 5:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.