Below is a copy of the "META for IOS & HANDHELD":
<!-- META FOR IOS & HANDHELD -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<style type="text/stylesheet">
@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }
</style>
<script type="text/javascript">
//<![CDATA[
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement("style");
msViewportStyle.appendChild(
document.createTextNode("@-ms-viewport{width:auto!important}")
);
document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
}
//]]>
</script>
<meta name="HandheldFriendly" content="true"/>
<meta name="apple-mobile-web-app-capable" content="YES"/>
<!-- //META FOR IOS & HANDHELD -->
Is there anything in that piece of code that I need to change, add or omit in order for the "pinch zoom" facility on tablets (like my iPad Mini) to work? Currently, this is not possible... I've just noticed that it doesn't work on your demo site, either. Should user-scalable be set to "yes", instead? What file would I need to open to amend that?
Please advise how this may be rectified. It kind of defeats my objective of offering a fully responsive experience.
Many thanks advance.
PS: I was going through the DOM via Fire Bug and came across a no-touch class of some sort, which seems to have been applied to the majority (if not all) of the elements... Would that have anything to do with it?