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:
- 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)
- 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.
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
Vous devez vous connecter pour publier un commentaire.
En général, je voudrais aller avec un zoom version comme @Paulie_D recommandé; donc l'utiliser sur toutes vos pages:
Ici est Lunettes de recommandation.
Si vraiment vous n'avez pas d'autre choix, je vous recommande d'ouvrir l'image dans le même navigateur à onglet/fenêtre avec le
meta
tag ci-dessus et un retour lien pour la navigation. Ainsi, le natif zoom par pincement est disponible.C'est un exemple pour la mise en œuvre (vous avez besoin d'un mobile utilisateur de l'agent): https://m.notebooksbilliger.de/notebooks/hp+compaq+15+h024sg
Ce type de carte est-il? Une carte google map?
openlayers avec une carte google couche... j'ai essayé hammer.js mais éprouve de la difficulté avec les téléphones windows. Je pense que peut-être la meilleure option à ce stade est de rediriger vers une nouvelle page, et l'utilisation de la fenêtre.emplacement.de retour() pour revenir rapidement.
pense qu'il y a de toute façon d'accomplir ceci avec un iframe?
OriginalL'auteur Fabian Mebus
Je ne suis pas sûr que c'est votre cas, mais généralement je préfère faire de l'image un lien (a) image originale. Les navigateurs mobiles de gérer cette situation l'ouverture d'une image dans
full screen
mode. Alors, l'utilisateur peut faire ce qu'il veut avec l'image ou pouvez revenir à la page principale.full screen mode
vous parler de? Est-ce un javascript ou css chose?Je parle de l'ouverture d'une image juste dans un navigateur sans addons/code js. La plupart des navigateurs, en particulier les téléphones mobiles, peuvent gérer cela très bien.
ah.. trop mauvais pincement et de zoom ne fonctionne pas pour cela 🙁
fonctionne pour moi sur plusieurs appareils android (sur firefox et chrome), je ne suis pas sûr que sur d'autres plates-formes.
Si vous mettre en œuvre la navigation dans une application Cordova, il n'y a pas de place pour mettre le bouton "Retour". Je suis absolument sûr que c'est Apple culpabilité, en ignorant la nécessité de cette importante du bouton de navigation. Mais nous ne pouvons pas changer cela. Donc la solution est seulement approprié pour les applications web et pas Cordova apps.
OriginalL'auteur spinus