/ bootstrap

Strips 0.51: pinch-to-zoom with Bootstrap

Announcing a tiny update that should add a noticeable bump to your experience using this website. The site is currently running version 0.51 of Strips, a WordPress theme that I’m developing.

While I was in Kagoshima this past week, a friend pulled up my website on his iPhone and immediately attempted a pinch-to-zoom gesture on one of the images, trying to make it bigger. Nothing happened.

The lack of zoom was actually an early development decision that I made to reduce the list of possible culprits when debugging the theme design.

But it’s not part of the overall end plan. Strips is meant to show off both photos and text, and on smaller devices, details in some images can be hard to see due to screen size.

If you want to zoom in on an image, you should be able to zoom. Now you can.

Allowing or disallowing zoom with Bootstrap

This is fairly simple so I’ll just put it down here. Since this is WordPress, everything below takes place in header.php.

Disallowing pinch-to-zoom

<meta name=“viewport” content=“width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no”>

Actually my original markup didn’t include the user-scalable part, but apparently that’s recommended if your intention is to block zoom for everyone.

Allowing pinch-to-zoom

<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>

In other words, just get rid of maximum-scale and user-scalable.

Most other Strips updates have included a list of various changes, but sometimes it’s just nice to get in and fix something specific then move on.

It is worth noting that the current resolution of images that I post on this site tops out at 1000px across. Once you go past that, you will see pixelation as a matter of course.