Conditionally load the meta viewport tag?

[neilcreagh]

I want to conditionally load the meta viewport tag, but can’t figure out how to do this (easily*).

I’m using a bootstrap based responsive design, but there is no ‘middle’ size, just desktop and mobile, so iPads and other small screens (greater than 480px) get the standard desktop view.

The viewport meta tag is required for the mobile layout, but I would like to remove this if the screen size is greater than 480px, because I would like the iPad and other tablet devices to automatically resize the desktop site to fit, as they do without the viewport tag.

Essentially I’m trying to do this:

Which would work perfectly in the body area, but not in the head area of the html.

Any ideas?
*I’m already loading JQuery and Bootstrap’s responsive features so is there anything in there that I can use, or does this involve custom javascripting (where I’m out of my depth)?

[Paulie_D]

I thought bootstrap had all viewports covered: http://twitter.github.io/bootstrap/scaffolding.html#responsive

I would think you could just change / remove the respective media query.

In any case, I don’t think you can do what is you are suggesting.

[neilcreagh]

“I would think you could just change / remove the respective media query.”
Yes but I would like the iPad/tablet to automatically resize the desktop site to fit, as they do without the viewport tag.

[iknowdavehouse]

Without seeing how it is rendering with or without the tag it’s hard to understand the problem. I would have thought it would behave itself until it got to the first (mobile) media query.

Anyway – Basically you want to be able to set a min or max-width to your viewport tag. I have no idea… but I googled it – this looks like it’s a similar idea – http://stackoverflow.com/questions/15040408/achieving-min-width-with-viewport-meta-tag

[Paulie_D]

What happens if you remove initial-scale statement from the viewport meta?

Just spitballing…

[neilcreagh]

Paulie_D that worked! Didn’t even think of it. That’s exactly what I was looking for, thank you.

Without the initial-scale=1.0 statement the responsive mobile view is still displaying correctly, but now the iPad is auto-scaling the ‘desktop’ layout down exactly as I wanted it to.

iknowdavehouse – thanks for replying also (and you probably assumed I tried this already or wasn’t using the initial-scale statement)

[Author]

Posts