Use jQuery to Clear iPad Viewport Cookie

Been doing some iPad work recently and thought I would post up some techniques and thoughts on how to clear ipad viewport cookie using jQuery. I’m fairly new to this mobile viewport manipulation so feel free to correct me, leave a comment.

Initial viewport meta tag setting

$('meta[name=viewport]').attr('content','width=device-width, user-scalable=yes, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0');

Note that gesturestart is the name of the event which captures the iPad screen resize zoom.

$(document).live('gesturestart', function()
{
    $('meta[name=viewport]').attr('content','width=device-width, user-scalable=yes, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0');
});

Other Methods that may work

Event listeners to detect the change of screen orientation of the iPad.

(function(doc) {

  var addEvent = 'addEventListener',
      type = 'gesturestart',
      qsa = 'querySelectorAll',
      scales = [1, 1],
      meta = qsa in doc ? doc[qsa]('meta[name=viewport]') : [];

  function fix() {
    meta.content = 'width=device-width,minimum-scale=' + scales[0] + ',maximum-scale=' + scales[1];
    doc.removeEventListener(type, fix, true);
  }

  if ((meta = meta[meta.length - 1]) && addEvent in doc) {
    fix();
    scales = [.25, 1.6];
    doc[addEvent](type, fix, true);
  }

}(document));

Change the viewport meta tag settings based on the doorientationchange() function which detects iPhone/iPad landscape modes be reloading the page.

var viewportmeta = document.querySelector && document.querySelector('meta[name="viewport"]'),
ua = navigator.userAgent;

function allowscale()
{
    viewportmeta.content = "width=device-width, minimum-scale=0.25, maximum-scale=3.2";
}
var t=setTimeout("allowscale()",1000);

//and re-fix the orientation bug to clean up all problems:-

function doorientationchange()
{
    if (viewportmeta && /iPhone|iPad/.test(ua) && !/Opera Mini/.test(ua))
    {
        if(((window.orientation)&2)==2) {
            location.reload(false); // Safari messes up when changing into landscape mode… so reload to fix it.
        }
    }
}

You can also use CSS properties as such:

body
  {
    -webkit-text-size-adjust:none;
    -webkit-transform: scale(1.1);
  }

Frequently Asked Questions (FAQs) about jQuery and iPad Viewport Cookie