Conditionally load the meta viewport tag?
# April 16, 2013 at 10:59 am
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.
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.# April 16, 2013 at 11:53 am
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# April 16, 2013 at 12:21 pm
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)
You must be logged in to reply to this topic.