Skip to main content

Use jQuery to Clear iPad Viewport Cookie

By Sam Deering

JavaScript

Share:

Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

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);
  }

Related Articles

Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

New books out now!

Learn the basics of programming with the web's most popular language - JavaScript


A practical guide to leading radical innovation and growth.

Integromat Tower Ad