Use jQuery to Clear iPad Viewport Cookie

By Sam Deering

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) {
    scales = [.25, 1.6];
    doc[addEvent](type, fix, true);


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:

    -webkit-transform: scale(1.1);

Free Guide:

7 Habits of Successful CTOs

"What makes a great CTO?" Engineering skills? Business savvy? An innate tendency to channel a mythical creature (ahem, unicorn)? All of the above? Discover the top traits of the most successful CTOs in this free guide.

No Reader comments

Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in JavaScript, once a week, for free.