web-dev-qa-db-fra.com

Forcer le zoom de page à 100% avec JS

J'ai créé un petit jeu dans Canvas, mais j'ai un problème. Certains utilisateurs dont le zoom par défaut est défini sur autre chose que 100% ne peuvent pas voir la page entière du jeu.

J'ai essayé d'utiliser ce CSS:

zoom: 100%;

Ce HTML

<meta name="viewport" content="initial-scale=1.0 , minimum-scale=1.0 , maximum-scale=1.0" />

Et ce JS:

style="zoom: 75%"

Des idées sur la façon de régler par programme le zoom de la page?

javascripthtmlbrowserzoom
32
Crocsx

Vous pouvez définir la propriété zoom au chargement de la page

document.body.style.zoom = 1.0

Mais, zoom est pas une propriété standard pour tous les navigateurs , je recommande d'utiliser transform à la place.

var scale = 'scale(1)';
document.body.style.webkitTransform =  scale;    // Chrome, Opera, Safari
 document.body.style.msTransform =   scale;       // IE 9
 document.body.style.transform = scale;     // General

http://jsfiddle.net/5RzJ8/

37
Fırat Deniz

Vous pouvez réinitialiser le code avec ceci:

$("input, textarea").focusout(function(){
    $('meta[name=viewport]').remove();
    $('head').append('<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=0">');

    $('meta[name=viewport]').remove();
    $('head').append('<meta name="viewport" content="width=device-width, initial-scale=yes">' );
});
7
Linden

Je pense que c'est une réponse très utile comment détecter le niveau de zoom de la page dans tous les navigateurs modernes . Alors la réponse à votre question pour IE:

document.body.style.zoom = screen.logicalXDPI / screen.deviceXDPI;
4
dizel3d

Le seul moyen que j'ai trouvé qui fonctionne nativement est de concevoir mon HTML/CSS avec les unités "vw" et "vh" (% par rapport à la fenêtre d'affichage) au lieu de "px". Vous pouvez l'utiliser partout où vous avez utilisé pour mettre "px" (taille de police, largeur, hauteur, rembourrage, marge, etc ...). Très utile pour une page conçue pour être affichée en plein écran uniquement (sans défilement) ou en "style kiosque". "vw" et "vh" ne sont pas affectés par le zoom du navigateur. Voir: https://www.w3schools.com/cssref/css_units.asp

1
Matt Roy

Il fonctionne en chrome 66:

document.body.style.zoom = (window.innerWidth / window.outerWidth)
1
Mehdi Souregi

Pour les navigateurs mobiles, la réponse de @ Linden a fonctionné le mieux pour moi sur Chrome. Cependant, sur FF mobile, il avait besoin de quelques ajustements supplémentaires, je suis arrivé à une version qui fonctionne dans les deux navigateurs:

let restore = $('meta[name=viewport]')[0];
if (restore) {
    restore = restore.outerHTML;
}
$('meta[name=viewport]').remove();
$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">');
if (restore) {
    setTimeout(() => {
        $('meta[name=viewport]').remove();
        $('head').append(restore);
    }, 100); // On Firefox it needs a delay > 0 to work
}

De plus, la balise de la fenêtre d'affichage de la page restaurée doit avoir une échelle maximale explicite pour permettre le zoom sur Firefox après la réinitialisation, je l'ai donc initialement défini comme suit:

<meta name="viewport" content="width=device-width, maximum-scale=10">

Testé sur mobile Chrome 76.0 et mobile Firefox 68.1.

0
Artem Vasiliev