2

I want to scale the desktop version of my site when viewed in tablet portrait and landscape mode, but I don't want to scale it when on a mobile device, as i have an optimised version of the site for mobile. At the moment I have the meta tag below:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

What is the best way for this to only apply when viewing the site on a mobile device?

THanks for any help.

user1153594
  • 281
  • 2
  • 20

2 Answers2

0

Create your viewports and use css media queries to target.

    @media only screen and (max-device-width: 480px) {
    div#wrapper {
        width: 400px;
    }

    div#header {
        background-image: url(media-queries-phone.jpg);
        height: 93px;
        position: relative;
    }

    div#header h1 {
        font-size: 140%;
    }

    #content {
        float: none;
        width: 100%;
    }

    #navigation {
        float:none;
        width: auto;
    }
}

Check out http://coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

Christopher Marshall
  • 10,678
  • 10
  • 55
  • 94
  • Hi, I already have media queries to target different devices. The issue was how to set the initial scale to 1, only for mobile devices and not for tablets. I've just got round this be only writing out the meta viewport tag if the screen size is less than 768px wide, using javascript. This seems to do the trick – user1153594 Apr 17 '12 at 09:30
  • For the record, I really hate sites that do this "optimized for mobile" thing and inhibit zoom on mobile devices. If I'm looking at a web page on my iPhone, I should be able to zoom in and get a better look at an image or whatever... – Mark Reed May 22 '12 at 04:20
  • I agree. Also, Banner ads. CBS has been terrible lately with their mobile site :{ – Christopher Marshall May 22 '12 at 22:00
0

Consider using WURFL for device detection. With WURFL's repository, you can load various libraries, css, etc. for specific device.

WURFL has a specific API call for tablets

if ( is_tablet == 'true' ) {
 //do this or load your scaling
 echo '<meta name="viewport" content="width=device-width, initial-scale=1">';
}else{
 echo '<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">';
}

WURFL API

JerryHuang.me
  • 1,790
  • 1
  • 11
  • 21