Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

resolution dependent mobile template

resolution dependent mobile template

Problem

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.

Problem courtesy of: Vad.Gut

Solution

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.

Solution courtesy of: Roman

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

resolution dependent mobile template

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×