Question

I am developing a small mobile page which supposed to be visible only for mobile devices.
But it should fit all Android & iPhone devices and their resolutions.

The template includes table and couple of images which should shrink in percentage in relation to the ratio of resolution change

what i basically need is a tip for smart CSS code which will consider the resolution and will pick from couple of different stylesheets i will create.

Answer 1

You can detect exact device using JS and generate stylesheet link for it.

//Detect mobile devices
var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase())),

//Detect only iPhone
iphone = (/iphone/i.test(navigator.userAgent.toLowerCase()));

//Apply stylesheet for mobile devices
if(mobile){
   var cssLink = document.createElement("link");
   cssLink.setAttribute("type", "text/css");
   cssLink.setAttribute("rel", "stylesheet");
   cssLink.setAttribute("href", "css/mobile.css");
   document.head.appendChild(cssLink);
}

//Apply stylesheet for iPhone only
if(iphone){
   var cssLink = document.createElement("link");
   cssLink.setAttribute("type", "text/css");
   cssLink.setAttribute("rel", "stylesheet");
   cssLink.setAttribute("href", "css/mobile.css");
   document.head.appendChild(cssLink);
}

Or detect all mobile devices using Media Query max-device-width:

@media only screen and (max-device-width: 480px) {
     /* CSS for mobile */
}

Notice that I set max-device-width to 480px. This is because of mobile devices screen measurements, it’s in reference pixels which is bigger than actual device pixel.
For example both iPhone 3 and 4 has device width 320px in both landscape and portrait modes. Some Android devices returns device width 480px.