Désactiver le zoom sur le focus de saisie dans la page Web Android
Voici le dilema, j'ai une page Web (uniquement pour les appareils Android) et dans cette page, j'ai une zone de saisie (une zone de texte en particulier) et quand il fait la mise au point, le navigateur effectue un zoom avant. Je ne veux pas qu'il fasse un zoom avant - sons facile, non?
Voici où ça s’amuse: je dois pouvoir zoomer en général, alors ne dites pas
<meta name='viewport' content='user-scalable=0'>
Cela ne fonctionnera pas pour moi.
En outre, la zone de saisie ne reçoit pas les événements de clic. Il apparaît quand un autre bouton est cliqué et obtient le focus par programme.
Voici ce que j'ai essayé et ils ont échoué jusqu'à présent:
jQuery('head meta[name=viewport]').remove();
jQuery('head').prepend('<meta name="viewport" content="width=720px;intial-scale=1.0;maximum-scale=1.0;user-scalable=no" />');
jQuery("#locationLock input").focus();
jQuery('head meta[name=viewport]').remove();
jQuery('head').prepend('<meta name="viewport" content="width=720px;intial-scale=1.0;maximum-scale=1.0;user-scalable=yes" />');
Cela a également échoué:
<input type='text' onfocus="return false">
Et ça:
jQuery("#locationLock input").focus(function(e){e.preventDefault();});
Des idées?
Pas possible!
J'ai de mauvaises nouvelles pour vous tous. Cela fait maintenant 6 mois et personne n’a répondu correctement à la question.
De plus, j'ai fini de travailler sur ce projet et sur l'employeur.
J'ai peur de le dire, mais ce que j'ai demandé est impossible. Désolé les peuples. Mais je vais laisser la question en suspens pour que les gens puissent voir les autres options.
Ce qui suit a fonctionné pour moi (Android Galaxy S2):
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no;user-scalable=0;"/>
Je ne suis pas sûr que ce soit la meilleure solution, mais cela fonctionne pour moi sur Android et iPhone.
input:focus { font-size: 16px!important}
Vous pouvez utiliser des requêtes multimédia pour cibler uniquement les périphériques mobiles.
Problèmes d'échelle dus au zoom sur le focus d'entrée
Il est très difficile de dimensionner le contenu pour différentes résolutions et tailles d’écran, ce qui est finalement la cause de ce problème de zoom.
La plupart des navigateurs mobiles ont un déclencheur sur le focus d'entrée (que vous ne pouvez pas contourner sans difficulté):
if (zoom-level < 1)
zoom to 1.5
center focused input relative to screen
* oui, c'était trop simplifié.
Mythe des correctifs d'échelle méta-tag.
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> Tous ces paramètres de fenêtre ne le feront pas empêchent le zoom de mise au point en entrée si vous effectuez un zoom arrière . Ils ne surchargeront pas non plus les autres tailles de HTML, de corps ou d'éléments qui Poussez la fenêtre à une largeur plus large que l'écran.
Cause principale
En utilisant une fenêtre ou une taille plus grande que les dimensions de l'écran du périphérique.
Considérez la taille d'écran standard de la plupart des téléphones intelligents Android de la gamme Galaxy: 360 x 650 . Si le corps du document, ou la fenêtre, est défini pour être plus grand que cela (disons, 1024 de large pour le rendre évident), un peu de choses peuvent arriver:
- Le navigateur peut automatiquement effectuer un zoom arrière pour s’adapter à la largeur de l’écran .
- L'utilisateur peut faire ce qui précède.
- Vous avez peut-être fait ce qui précède.
- Le navigateur rétablira le niveau de zoom lors de visites ultérieures sur la page.
- Vous visualisez maintenant le contenu à un zoom d'environ 0,35x.
Etat initial 1x
Une fois chargée, la page ne rentre pas. Certains navigateurs peuvent effectuer un zoom arrière pour s’adapter à la fenêtre, mais l’utilisateur le fera certainement. En outre, si vous avez effectué un zoom arrière sur cette page une fois, le navigateur enregistre le niveau de zoom.
Zoom arrière pour Fit 0.35x
Une fois le zoom réduit, la largeur s’intégrera parfaitement, et une page plus verticale remplira l’écran assez bien ... mais ...
Notez que le navigateur est maintenant dans un état où le texte et l'entrée (dimensionnés pour un zoom 1x normal) seraient beaucoup trop petits pour être lus, ce qui déclenche un comportement de convivialité consistant à effectuer un zoom sur les champs de saisie lorsqu'ils sont activés.
Zoom sur entrée-focus 1.5x
Le comportement typique dans le cas ci-dessus consiste à effectuer un zoom sur 1,5x pour assurer la visibilité des entrées. Le résultat (si vous avez tout conçu pour un meilleur rendu lorsque vous effectuez un zoom arrière ou pour un écran plus grand) est moins souhaitable.
Solution 1
Utilisez une combinaison de règles de média css, de détection de périphérique ou de tout autre choix qui convient le mieux à votre situation.
- C’est pourquoi tant de gens réussissent à forcer l’entrée de texte d'une taille de 16px;
- une fois que vous avez fait cela, il est clair que vous êtes en train de faire un zoom arrière.
- cela présente également l'avantage supplémentaire d'inciter le navigateur à autoriser des fenêtres légèrement agrandies pour ne pas déclencher la mise au point avec zoom.
Solution 2
Utilisez la méta-fenêtre, mais soyez prudent avec les largeurs css.
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
- Lorsque vous utilisez cette méthode, vous devez effectuer l’une des opérations suivantes:
- N'utilisez que des pourcentages pour les largeurs.
- Définissez une largeur em et utilisez uniquement em et% pour les largeurs.
- voir la solution 1 pour utiliser les largeurs px.
Solution 3
jQuery.mobile $.mobile.zoom.disable();
Assurez-vous simplement de commencer à développer avec elle dès le début, et non à partir du milieu.
Oui c'est possible
input[type='text'],input[type='number'],textarea {font-size:16px;}
Testé dans les navigateurs Android 4.2 et Android Chrome.
https://stackoverflow.com/a/6394497/4264
Le seul cas où j'ai constaté que le zoom continuait était dans Chrome avec Paramètres -> Accessibilité -> Mise à l'échelle du texte supérieure à 100%.
Nous sommes confrontés à ce problème aujourd'hui et nous aurons peut-être bientôt une mise à jour de chrome qui pourrait résoudre le problème. D'après le numéro chrome signalé par @Jo,
no.28 jdd ... @ chromium.org À partir de https://codereview.chromium.org/196133011/ , la recherche automatique est désactivée sur les sites dotés d'une vue optimisée pour les mobiles (par exemple, " width = device-width "ou une annotation de fenêtre d'affichage à l'échelle de page fixe).
Il se peut qu'il y ait toujours un défilement automatique lors de la mise au point d'éléments modifiables sur ces sites, afin de maintenir la visibilité de l'élément, mais le zoom sera désactivé. Cela sera diffusé sur M41 (il reste encore un bon nombre de semaines après le passage de la chaîne bêta).
Nous ne prévoyons pas d'empêcher autrement le zoom automatique sur les sites de bureau hérités.
À partir de ce moment, Chrome est v.40; La v.41 est en version bêta. Va vérifier si le focus reste perdu sur le navigateur Android Chrome.
font-size: 18px;
Cela a résolu le problème pour mon Nexus 7 (2011) fonctionnant sous Android 4.3.
Ce problème n'existe que sur le Nexus 7, les appareils suivants semblent tous satisfaits de la taille de police: 16px:
- HTC Desire Android 2.3.7
- Nexus 4 Android 4.3
J'espère que cela aide quelqu'un!
J'ai examiné ce problème car il m'énerve avec mon application HTML5 pour Android. Je peux offrir une demi-réponse. C'est-à-dire comment arrêter la mise à l'échelle de la page lorsqu'un champ de texte est concentré.
Requiert Jquery Mobile:
$('#textfield').textinput({preventFocusZoom:true});
fait exactement cela.
Mais, comme je l'ai dit, cela ne résout que la moitié du problème. L'autre moitié permet à l'utilisateur de zoomer à nouveau sur la page par la suite. La documentation que j'ai trouvée semble suggérer que
$('#textfield').textinput({preventFocusZoom:false});
ou
$('#textfield').textinput('option','preventFocusZoom',false);
devrait le désactiver, mais je n’ai pas réussi à faire fonctionner l’une ou l’autre option. Ce n’est pas un problème si vous allez ensuite amener l’utilisateur sur une autre page, mais son utilisation est limitée si, comme moi, vous allez simplement charger du contenu via AJAX.
EDIT: Bien que visant à IOS,
$.mobile.zoom.disable();
Arrête également le zoom. D'une manière plus convenablement générique. Mais malheureusement
$.mobile.zoom.enable();
Ne parvient pas à restaurer la fonctionnalité, tout comme l'ancien code.
Cela fonctionne où #inputbox est l'id de l'élément de formulaire en entrée.
J'utilise ceci pour empêcher une zone de recherche d'effectuer un zoom automatique sur IOS. Il s'agit d'un mod de la publication précédente ci-dessus, car l'événement mouseover ne fonctionnerait que la première fois mais ne déclencherait pas les temps suivants. Profitez-en, c’était un vrai arracheur de cheveux ...
$("#inputbox").live('touchstart', function(e){
$('head meta[name=viewport]').remove();
$('head').prepend('<meta name="viewport" content="user-scalable=0" />');
}
);
$("#inputbox").mousedown(zoomEnable);
function zoomEnable(){
$('head meta[name=viewport]').remove();
$('head').prepend('<meta name="viewport" content="user-scalable=1" />');
}
Juste une note de côté:
La solution avec le meta name="viewport" fonctionne parfaitement. Cependant, les navigateurs natifs et Chrome d'Android ont un paramètre d'accessibilité nommé "Ignorer la demande du site Web de contrôler le zoom". Si ce paramètre est défini, rien dans HTML, CSS ou JavaScript ne peut désactiver le zoom.
Vous avez besoin de 2 choses:
Utilisez une métabalise comme celle-ci dans votre tête pour éviter à l'utilisateur de zoomer:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Et ensuite, dans votre css, mettez quelque chose comme ceci pour empêcher le navigateur de zoomer:
* { font-size:16px; }
Terminé! Je pense que le navigateur redimensionne votre fenêtre d’affichage en fonction de la plus petite police ou de quelque chose comme ça. Peut-être que quelqu'un pourrait mieux l'expliquer, mais cela a fonctionné :)
Je ne sais pas si vous pouvez désactiver le zoom, mais vous pouvez définir une restriction comme celle-ci.
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no">
maximum-scale = 0.5 et minimum-scale = 0.5 devrait faire l'affaire ..__ Cela a fonctionné pour moi.
Si vous définissez la taille de la police de saisie sur 16px le zoom s’arrête. Les navigateurs mobiles supposent que tout ce qui est inférieur à 16 px signifie que les utilisateurs devront zoomer, alors pourquoi ne pas le faire moi-même.
input[type='text'],input[type='number'],textarea {font-size:16px;}
body{ -webkit-text-size-adjust:none;}
Vous pouvez également définir la balise méta ci-dessous, mais cela empêchera complètement la mise à l'échelle de l'utilisateur.
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0;"/>
Si vous voulez mettre à l'échelle l'utilisateur mais ne désactiver que l'entrée, essayez ceci
$("input[type=text], textarea").mouseover(zoomDisable).mousedown(zoomEnable);
function zoomDisable(){
$('head meta[name=viewport]').remove();
$('head').prepend('<meta name="viewport" content="user-scalable=0" />');
}
function zoomEnable(){
$('head meta[name=viewport]').remove();
$('head').prepend('<meta name="viewport" content="user-scalable=1" />');
}
essayez aussi ceci
Cela peut être une bonne réponse:
input, textarea {
max-width:100%;
}
N'utilisez pas <meta name=viewport content='user-scalable=no'>
Modèle de travail
Nous avons ce travail sur Android. Voici la clé: la font-size sur le input doit avoir la taille appropriée. Si votre page fait 320px de large, vous avez besoin d'une taille de police de 16px. Si votre taille est 640px alors vous avez besoin d'une taille de police de 32px.
De plus, vous avez besoin des éléments suivants
320 large version
<meta name="viewport" content="width=320, initial-scale=1, maximum-scale=1, minimum-scale=1" />
640 large version
<meta name="viewport" content="width=640, initial-scale=.5, maximum-scale=.5, minimum-scale=.5" />
NOTE: CECI NE CONTENU PAS L'ATTRIBUT SCALABLE PAR L'UTILISATEUR. C'EST CASSÉ.
Pour quiconque tente d’arrêter le zoom lorsqu’il tente de faire la mise au point sur un champ de saisie masqué, vous pouvez rendre l’entrée masquée aussi grande (ou au moins aussi large) que la zone de l’écran (ou la zone visible).
par exemple.
HIDDENinput.style.width = window.innerWidth;
HIDDENinput.style.height = window.innerHeight; (facultatif)
Essayez celui-ci, cela fonctionne sur mon appareil:
<meta content="minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no" name="viewport" />
Toutefois, lorsque je double-clique sur la zone de saisie, le clavier glisse vers le haut et réduit la hauteur de la page.
Généralement, vous ne souhaitez pas désactiver les fonctionnalités d'accessibilité.
Mais vous pouvez contourner le problème de zoom en ajoutant simplement une div fixe et en y plaçant votre page Web.
#app {
position: fixed;
top: 0em;
bottom: 0em;
left: 0em;
right: 0em;
overflow: scroll;
}<body>
<div class="app">
<!-- the rest of your web page -->
<input type="text">
</div>
</body><body>
<div class="app">
</div>
</body>
Peut-être pourriez-vous éviter le zoom en réinitialisant l'échelle du zoom sur 1.0? Sur mon Android (HTC Wildfire S), je peux réinitialiser le zoom sur 1.0 comme suit:
$('meta[name=viewport]').attr('content',
'initial-scale=1.0, maximum-scale=0.05');
mais cela déplace la fenêtre d'affichage sur 0, 0 (le coin supérieur gauche de la page). Donc, je $().scrollLeft(...) et .scrollTop(...) de nouveau à la form.
(initial-scale=1.0, maximum-scale=0.05 est ma valeur initiale de la méta viewport.)
(La raison pour laquelle je le fais n'est pas pour empêcher Android de zoomer, mais pour réinitialiser le zoom à une échelle connue, à cause d'autres bugs Android qui autrement corrompraient screen.width et d'autres valeurs associées.)
ajoutez cette balise META à votre fichier HTML pour résoudre le problème.
<html><head><meta name='viewport' content='width=device-width, initial-scale=1.0, user-scalable=0' ></head><body>html code</body></html>
Un peu tard pour la fête, mais j'ai passé tout un après-midi hier à devenir fou avant d'arriver à ce post et j'ai réalisé qu'il s'agissait d'une fonctionnalité/d'un bug d'Android. Je vais donc poster ma solution. Cela a fonctionné pour moi et permet toujours d'activer le zoom utilisateur:
Meta:
<meta id="meta1" name="viewport" content="width=device-width,initial-scale=1,minimal-ui"/>
CSS:
html{
position:absolute;
overflow:-moz-scrollbars-vertical;
overflow-y:scroll;
overflow-x:hidden;
margin:0;padding:0;border:0;
width:100%;
height:100%;
}
body{
position: relative;
width: 100%;
height: 100%;
min-height:100%;
margin: 0;
padding: 0;
border: 0;
}
Définir HTML sur position:absolute et overflow-x:hidden a été le bon choix pour moi.
Définir la propriété userport scalable de la fenêtre d'affichage sur touchstart l'a fait pour moi, pas besoin de supprimer, puis de rajouter, il suffit de la changer sur touchstart, puis de l'activer de nouveau sur flou. Cela signifie que l'utilisateur ne peut pas zoomer lorsqu'il est concentré sur le champ mais un petit prix à payer je pense.
var zoomEnable;
zoomEnable = function() {
$("head meta[name=viewport]").prop("content", "width=device-width, initial-scale=1.0, user-scalable=yes");
};
$("input[type='text']").on("touchstart", function(e) {
$("head meta[name=viewport]").prop("content", "width=device-width, initial-scale=1.0, user-scalable=no");
});
$("input[type='text']").blur(zoomEnable);
J'ai eu le même problème (uniquement dans le navigateur Chrome Android). J'ai résolu le problème comme ça.
Détecter l'utilisateurAgent et lier les événements onFocus et onBlur des champs de texte pour modifier le méta-contenu de la fenêtre d'affichage comme suit
if ((navigator.userAgent.match(/Android/i)) && (navigator.userAgent.toLowerCase().indexOf('chrome') > -1)) { isAndroidChrome = true; } var viewportmeta = document.querySelector('meta[name="viewport"]');onFocus du champ de texte, je règle le méta-contenu de la fenêtre d'affichage
viewportmeta.content = 'width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1';onBlur du champ de texte, je réinitialise le méta-contenu de la fenêtre d'affichage à
viewportmeta.content = 'width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1.4';. Vous pouvez définir l'échelle maximale si vous le souhaitez, ou si vous souhaitez qu'il soit évolutif pour l'utilisateur, ne définissez pas l'échelle maximale.
Lorsque vous modifiez le déclencheur de l'événement onFocus de l'entrée, si le maximum-scale est 1, il ne fait pas un zoom avant . Cela a fonctionné comme un charme pour moi. J'espère que ça marchera pour toi aussi.
Comme @soshmo l'a dit, user-scalable n'est pas un attribut que WebKit aime et son inclusion fait en sorte que WebKit supprime la balise entière de la fenêtre d'affichage. J'ai aussi trouvé que c'était le cas avec le réglage de maximum-scale sur autre chose que 1, et cela n'a pas empêché le zoom.
Réinitialiser la viewport sur chaque événement focus et blur a fonctionné pour moi:
var htmlWidth = parseInt($('html').outerWidth());
var screenDPI = parseInt(window.devicePixelRatio);
var screenWidth = parseInt(screen.width);
var screenHeight = parseInt(screen.height);
var scaleVal = (((screenWidth * screenDPI) / htmlWidth)/screenDPI);
$('input[type="text"], input[type="password"], input[type="email"]').each(function() {
//unchained for clarity
$(this).focus(function() {
$('meta[name="viewport"]').attr('content', "initial-scale=' + scaleVal + ', maximum-scale=1, minimum-scale=' + (scaleVal) + ', width=device-width, height=device-height");
// Do something to manage scrolling the view (resetting the viewport also resets the scroll)
$('html, body').scrollTop(($(this).offset().top - (screenHeight/3)));
});
$(this).blur(function() {
$('meta[name="viewport"]').attr('content', "initial-scale=' + scaleVal + ', maximum-scale=1, minimum-scale=' + (scaleVal) + ', width=device-width, height=device-height");
});
});
Si vous trouvez que définir/réinitialiser la viewport il est utile de vérifier que WebKit accepte les attributs de contenu que vous utilisez. Il m'a fallu un certain temps pour comprendre que l'utilisation d'éléments tels que user-scalable provoquait la suppression de viewport. Ainsi, même si le JavaScript fonctionnait, les modifications n'étaient pas affectées.
Je poste une réponse parce que j’ai fait face à un problème similaire et que j’ai résolu le problème.
Ma condition est ci-dessous.
Un paramètre de fenêtre d'affichage dans la tête html est
<meta name="viewport" content="width=640">
Les agents sont le navigateur Android par défaut.
Ils ne sont pas Chrome, Firefox et Safari.
Les versions Android sont sous 4.2.x.
Les détails de nos situations ne sont pas les mêmes mais je pense qu'ils ont un problème essentiellement égal.
Je l'ai résolu en ajoutant "target-densitppi = device-dpi" dans la balise meta [name = viewport].
<meta name="viewport" content="width=640, target-densitydpi=device-dpi">
Essayez-le s'il vous plaît.
Mais je dois dire que "densité-cible" = dpi-périphérique "aurait un effet secondaire.
Le mauvais cas est ici.
- Un ancien navigateur Android lit "cible-densitédpi = périphérique-dpi".
- Il va à l'autre page qui n'a pas de propriété target-densitédpi.
- Le navigateur commence à afficher la page sous la forme "cible-densitédpi = périphérique-dpi".
- Donc, cela rend la page suivante dans un facteur d'échelle incorrect.
Une solution de ce cas consiste à réécrire la propriété target-densedpi en "résolution moyenne" à partir de "résolution-périphérique" en utilisant javascript avant de passer à la page suivante.
Un exemple utilisant jQuery.
<a href="go-to-the-other" class="resetDensityDpi">Other page</a>
<script>
$(function(){
$('.resetDensityDpi').click(function(){
var $meta = $('meta[name="viewport"]');
$meta.attr('content', $meta.attr('content').replace(/target-densitydpi=device-dpi/, 'target-densitydpi=medium-dpi'));
return true;
});
});
</script>
Et ... ce code pose un nouveau problème.
Certains navigateurs affichent les résultats du processus javascript à l'aide des données de cache lorsqu'ils reviennent à la page précédente à l'aide du bouton Précédent . Ils affichent donc la page précédente sous la forme "cible-densitédpi = moyen-dpi" "PAS sous" cible-densitdpi = device-dpi ".
Une solution de ceci est juste l'opposé de ci-dessus.
<script>
$(function(){
var rollbackDensityDpi = function() {
// disable back-forword-cache (bfcache)
window.onunload = function(){};
var $meta = $('meta[name="viewport"]');
if ($meta.attr('content').match(/target-densitydpi=medium-dpi/)) {
$meta.attr('content', $meta.attr('content').replace(/target-densitydpi=medium-dpi/, 'target-densitydpi=device-dpi'));
}
};
if (window.addEventListener) {
window.addEventListener("load", rollbackDensityDpi, false);
} else if (window.attachEvent) {
window.attachEvent("onload", rollbackDensityDpi);
} else {
window.onload = rollbackDensityDpi;
}
});
</script>
Je vous remercie.
Par accident, j'ai découvert que ceci:
input {
line-height:40px;
}
empêchera le zoom sur l'entrée sur mon Galaxy Nexus avec Chrome pour Android version 18 Bien que cela puisse être spécifique à mon cas:
<meta name='viewport' data='width=800'>
donc pour référence future, si vous venez ici via google, cela pourrait être une solution parmi d’autres.
Gardez le contenu plus étroit que la fenêtre.
Vous devrez concevoir votre page depuis le début en gardant cela à l'esprit, mais c'est tout à fait efficace.
La clé consiste à utiliser @media css at-rule pour autoriser uniquement les composants à avoir des largeurs que vous savez que l’écran est suffisamment grand pour contenir.
Par exemple, si vous avez défini une largeur de contenu qui ne répartisse pas trop le texte sur un moniteur plus grand, assurez-vous que cette largeur ne s'applique qu'aux grands écrans:
@media (min-width: 960px){
.content{
width : 960px;
}
}
Ou peut-être avez-vous une image de 500 pixels de large, vous devrez peut-être la masquer sur des écrans plus petits:
@media (max-width: 500px){
.image{
display : none;
}
}
A travaillé pour galaxy 4:
Ajoutez le code au fichier d'index d'en-tête HTML:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no;user-scalable=0;"/>