L'ajout de pinch-zoom div de l'image à un non-évolutive fenêtre d'affichage sur les appareils mobiles

De considérer les éléments suivants fenêtre d'affichage de la balise meta:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui" />

Le contenu de la page est non extensible et mobile responsive. Parfois, j'ai besoin de superposer une grande image sur le dessus de lui, et de permettre à l'utilisateur de " pincer pour zoomer l'image.

#overlay_div {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #dddddd;
    z-index: 550000;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}

<div id="overlay_div">
    <img src="largeimage.jpg" width="100%">
</div>

Actuellement, je suis conscient du fait que deux options possibles:

  1. Modifier par programmation la meta viewport pour permettre à l'utilisateur de mise à l'échelle (possible de la croix-navigateur implications, provoque aussi de contenu en dessous de l'échelle qui n'est pas souhaitable)
  2. Utilisation hammer.js manuellement la poignée de la pince de l'événement et l'ampleur de la div/image en conséquence (semble très complexe possible compatibilité des implications).

Personne ne sait la bonne façon de le faire, en particulier pour la compatibilité inter-navigateur? J'espère qu'il y a peut être un simple CSS solution.

Grâce

J'espère que personne qui porte des lunettes essaie d'utiliser cette page,,,parce que si ils ne peuvent pas...ils ne seront pas en mesure de le lire. C'est pourquoi il n'est pas recommandé de propriété.
millikenchemical.com sur un appareil mobile est non évolutif, mais peut être lu. De ma compréhension, c'est là que le web est dirigé. Mobile convivial, réactif contenu. Merci.

OriginalL'auteur wayofthefuture | 2014-06-27