Pinch/Zoom viewport specification works on iPhone but not on Android

Question

I made a WordPress site a while back from a Sailing Company, xssailing.com and currently have the view port set as:

<meta name="viewport" content="user-scalable=yes;width=device-width; initial-scale=0.31; maximum-scale=1.0;"/>

The site works fine on a computer and I can pinch and zoom fine on an iPhone/iPad. When I visit the site with my kindle I cannot pinch and zoom like I can on other sites. Any ideas?

Thanks!

Answer 1

You are right, it does not zoom. Tested on a Nexus S with the default browser.

Safari defined really stupid defaults for this tag (exactly 960 pixels for width, exactly for an old iPhone no longer made). Thus you'll want to explicitly specify minimum-scale. By specifying all three scale parameters (rather than 2 of the 3) your page zooms fine:

<meta name="viewport" content="
user-scalable=yes;
width=device-width;
initial-scale=0.31; maximum-scale=1.0; minimum-scale=0.25"/>

Also wait for the entire page to fully load before trying to zoom.

---

Note this would be a MUCH stronger Stack Exchange question with a complete minimal example, and no spammy link to a particular website. The broader the applicability of the question and the answer, the better!