Multiple Meta-Viewports for iPad/iPhone

It’s not ideal, as you’re manually targeting the iPad, but …

Default Viewport Code (change as needed for default mobile devices)


JavaScript code (play with as you like for your own purposes)

if( navigator.userAgent.match(/iPad/i) != null ){
	viewport = document.querySelector("meta[name=viewport]");
	viewport.setAttribute('content', 'width=1000px, user-scalable=0');
}

I used this in my submission for the CSS-Off, to ensure that the viewport specified for mobile devices didn’t also restrict the iPad’s version of the site.

Author: George Stephanis

Cooking, Code, Carpentry, Letterpress.