CODEWITHSUNDEEP
jquery-mobile
williamsandonz
williamsandonz

Reputation: 16440

jquerymobile one page with different meta viewport settings

I've tried adjusting my meta viewport tag on a jQM beforepageshow etc it simply doesn't work and I guess that's pretty obvious why. I have one page with a highcharts chart on it and I need to have nothing inside my viewport tag which normally has width=device-width, initial-scale=1,user-scalable=no, minimum-scale=1.0, maximum-scale=1.0

and that's because I want the app to zoom out when the chunky chart goes in, has anyone had any brilliant ideas on how to have one page with different viewport settings? I could link to it without AJAX and then output the right meta tag conditionally but I'd rather not do this.

Upvotes: 4

Views: 3528

Answers (1)

Jasper
Jasper

Reputation: 76003

I dynamically changed the meta viewport tag on a couple of my mobile websites when I want to enable zooming for an image or something else that requires the user looking at small 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 expects to be included after jQuery and the meta viewport tag. You can obviously change the contents of the viewport element as you see fit (I believe that Safari will allow a maximum-scale of 10).

Upvotes: 4

Related Questions