Making a ‘post-it game’ PWA with mobile accelerometer API’s | Trys Mudford
I made an offhand remark at the Clearleft Christmas party and Trys ran with it…
I made an offhand remark at the Clearleft Christmas party and Trys ran with it…
Last Christmas I gave you my bug report. Well, more of a whinge really. Scott put together a much better bug report and test page:
When the meta viewport tag is set to content=”width=device-width,initial-scale=1”, or any value that allows user-scaling, changing the device to landscape orientation causes the page to scale larger than 1.0. As a result, a portion of the page is cropped off the right, and the user must double-tap (sometimes more than once) to get the page to zoom properly into view.
Yes, it’s the old orientation and scale bug in Mobile Safari.
I’m pleased to report that as of iOS version 6, this bug seems to have finally been squashed. Hallelujah!
Given the relatively rapid upgrade path for iPhone, iPod Touch and iPad users, it won’t be long until we can remove our clever solutions for working around this problem.
Stand down, hackers, stand down. This bug has been taken care of.
That Scott is one smart cookie. He has come up with a workaround (using the accelerometer) for that annoying Mobile Safari orientation/zoom bug that I blogged about recently.
I still want Apple to fix this bug as soon as possible—the fact that such smart people are spending so much effort on ingenious hacks shows just how much of a pain-point this is.
Dear Apple Claus,
I’ve been a very good boy this year so I hope you don’t me asking for a little present. What I’d really like for Christmas is for you to fix that strange orientation scaling bug in Mobile Safari.
Just in case you’ve forgotten about it, my friend Scott—who has been a very, very good boy this year (what with that whole Boston Globe thing)—put together a test page quite a while back to demonstrate the problem.
Basically, if I set meta name="viewport" content="width=device-width, initial-scale=1.0"
then it means a pixel should be equal to a pixel: in portrait view, the width should be 320 pixels; in landscape view the width should be 480 pixels. But in Mobile Safari, if I move from portrait to landscape, the width jumps to a value larger than 480 pixels, which means the hapless user must double tap to bring the scale down to 1:1.
Now, admittedly, I could just set meta name="viewport" content="width=device-width"
and leave it at that (or I could additionally declare minimum-scale=1.0
). But then when the user changes from portrait to landscape, although it doesn’t have the same over-zooming behaviour, it does scale up. That means I’m not getting the full 480 pixels (it’s effectively still a 320 pixel wide display, even in landscape).
I could make the bug disappear by adding maximum-scale=1.0
or user-scaleable=no
but that’s the cure that kills the patient. I also did some hacking with Shi Chuan but what we come up with still feels fairly clunky.
So that’s why I’m writing to you, Father Applemas. Won’t you fix this bug for me?
My friend PPK thinks you won’t fix this bug because it would trigger a reflow (and repaint) of the page …but I know that can’t be the reason because the bug doesn’t occur when going from landscape to portrait!
Also—and this is the really strange part—If I’m looking at a web page on my iPhone/Pod in a custom browser (like the Twitter app), rather than using Mobile Safari, then the bug doesn’t occur.
I don’t get, Apple Claus. Why have one behaviour for webviews in other people’s apps and a different behaviour for your own app?
Anyway, if you could see your way to granting this boy’s wish, it would make for a webby Christmas.
Hugs and kisses,
Jeremy
P.S. By this time next year, it would be lovely to have access to the camera (and other device APIs) from the browser …but I’m getting ahead of myself.
Update: the bug has been fixed in iOS 6.
Well, this is very intriguing: it turns out that the infamous orientation/scale bug in Mobile Safari isn’t present in in-app browsers (UIWebView). Most odd.
Paul Irish, Divya Manian and Shi Chuan launched Mobile Boilerplate recently—a mobile companion site to HTML5 Boilerplate.
There’s some good stuff in there but I was a little surprised to see that the meta viewport
element included values for minimum-scale=1.0, maximum-scale=1.0, user-scalable=no
:
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
Setting user-scalable=no
is pretty much the same as setting minimum-scale=1.0, maximum-scale=1.0
. In any case, I’m not keen on it. Like Roger, I don’t think we should take away the user’s right to pinch and zoom to make content larger. That’s why my usual viewport declaration is:
<meta name="viewport" content="width=device-width, initial-scale=1">
Yes, I know that most native apps don’t allow you to zoom but I see no reason to replicate that failing on the web.
But there’s a problem. Allowing users to scale content for comfort would be fine if it weren’t for a bug in Mobile Safari:
When the meta viewport tag is set to
content="width=device-width,initial-scale=1"
, or any value that allows user-scaling, changing the device to landscape orientation causes the page to scale larger than 1.0. As a result, a portion of the page is cropped off the right, and the user must double-tap (sometimes more than once) to get the page to zoom properly into view.
This is really annoying so Shi Chuan set about fixing the problem.
His initial solution was to keep minimum-scale=1.0, maximum-scale=1.0
in the meta viewport
element but then to change it using JavaScript once the user initiates a gesture (the gesturestart
event is triggered as soon as two fingers are on the screen). At the point, the content
attribute of the meta viewport
element gets updated to read minimum-scale=0.25, maximum-scale=1.6
, the default values:
var metas = document.getElementsByTagName('meta');
var i;
if (navigator.userAgent.match(/iPhone/i)) {
document.addEventListener("gesturestart", gestureStart, false);
function gestureStart() {
for (i=0; i<metas.length; i++) {
if (metas[i].name == "viewport") {
metas[i].content = "width=device-width, minimum-scale=0.25, maximum-scale=1.6";
}
}
}
}
That works nicely but I wasn’t too keen on the dependency between the markup and the script. If, for whatever reason, the script doesn’t get executed, users are stuck with an unzoomable page.
I suggested that the script should also set the initial value to minimum-scale=1.0, maximum-scale=1.0
:
var metas = document.getElementsByTagName('meta');
var i;
if (navigator.userAgent.match(/iPhone/i)) {
for (i=0; i<metas.length; i++) {
if (metas[i].name == "viewport") {
metas[i].content = "width=device-width, minimum-scale=1.0, maximum-scale=1.0";
}
}
document.addEventListener("gesturestart", gestureStart, false);
}
function gestureStart() {
for (i=0; i<metas.length; i++) {
if (metas[i].name == "viewport") {
metas[i].content = "width=device-width, minimum-scale=0.25, maximum-scale=1.6";
}
}
}
Now the markup still contains the robust accessible default:
<meta name="viewport" content="width=device-width, initial-scale=1">
…while the script takes care of initially setting the scale values and also updating them when a gesture is detected. Here’s what’s happening:
meta viewport
declaration doesn’t set a minimum-scale
or maximum-scale
.minimum-scale
and maximum-scale
have been set to 1.0
. If the device is switched from portrait to landscape, the resizing bug won’t be triggered because scaling is disabled.gesturestart
event is detected—indicating that the user might be trying to scale the page—the minimum-scale
and maximum-scale
values are updated to allow scaling. At this point, if the device is switched from portrait to landscape, the resizing bug will occur because the page is now scaleable.Jason Weaver points out that you should probably detect for iPad too. That’s a pretty straightforward update:
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i))
Mathias Bynens updated the code to use querySelectorAll
which is supported in Mobile Safari. Here’s the code I’m currently using:
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
var viewportmeta = document.querySelector('meta[name="viewport"]');
if (viewportmeta) {
viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0';
document.body.addEventListener('gesturestart', function() {
viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
}, false);
}
}
You can try it out on Huffduffer, Salter Cane, Principia Gastronomica and right here on Adactio.
Right now there’s still a little sluggishness between the initial pinch-zoom gesture and the scaling; the scale values (0.25 - 1.6) don’t seem to take effect immediately. A second pinch-zoom gesture is often required. If you have any ideas for improving the event capturing and propagation, dive in there.
Update: the bug has been fixed in iOS 6.