Jquerymobile on one page with different meta view settings

Question

I tried setting the meta viewport tag to jQM beforepageshow , etc., it just doesn't work, and I think it's pretty obvious. I have one page with a tall diagram chart on it, and I don’t need to have anything inside my view tag, which usually has width=device-width, initial-scale=1,user-scalable=no, minimum-scale=1.0, maximum-scale=1.0

and because I want the application to scale down when the chart breaks in, does anyone have any brilliant ideas on how to create one page with different viewport settings? I could reference it without AJAX and then output the correct meta tag conditionally, but I would prefer not to.

Answer 1

I dynamically changed the meta viewport tag on several of my mobile sites when I want to enable scaling for the image or something else that requires the user to search for a little text:

 var $viewport = $('meta[name="viewport"]'), default_viewport = $viewport.attr('content'); $(document).delegate('#page-id-one, #page-id-two', 'pageshow', function () { //these are the pages that you want to enable zooming $viewport.attr('content', 'width=device-width,initial-scale=1.0,maximum-scale=5.0'); }).delegate('#page-id-one, #page-id-two', 'pagehide', function () { $viewport.attr('content', default_viewport); }); 

This code will be included after jQuery and the meta viewport tag. Obviously, you can modify the contents of the viewport element as you wish (I believe Safari will allow maximum-scale 10 ).