HTML5 Boilerplate, iOS, and the viewport meta tag

  • HTML5 boilerplate developers beware! I'm making this post to hopefully save someone else from the day of grief I just went through.

    I'm starting out a new HTML5 project, and I am using the current HTML5 Boilerplate HTML and css templates as my staring point. The viewport meta tag in the starting HTML5 Boilerplate html template is as follows:


    <meta name="viewport" content="width=device-width">

    When I used this viewport tag I would get strange, intermittent behavior in the HTML5 viewer where a few tiles within a panorama would fail to render when viewed on an iPad. The locations of the tiles that would not render seemed to be essentially random. Note that the panoramas would always render perfectly when the page was viewed on a desktop browser - the bad behavior appears only when viewed on an iPad (and probably any iOS device, but I tested only on an iPad2 and a current iPad3).

    After a long process of trial and error I finally tried replacing the viewport tag with the value that is present in example code on the krpano site:


    <meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />

    and viola! the missing tiles disappeared and everything was and is good. So make sure you use the above meta viewport tag value for any page if you are targeting iOS.

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!