Forcer le zoom de la page à 100% avec JS

J'ai créé un petit jeu en toile, mais j'ai un problème.

Certains utilisateurs dont le zoom par défaut est réglé sur autre chose que 100% ne peuvent pas voir toute la page du jeu...

J'ai cherché sur internet une solution à ce problème mais je n'ai pas pu en trouver un...

J'ai déjà utilisé:

zoom: 100%; en CSS.

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

Et

style="zoom: 75%"

Quelqu'un peut-il m'aider s'il vous plait.

Merci

22
demandé sur joe_young 2014-01-13 18:23:31

3 réponses

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

document.body.style.zoom = 1.0

Mais, zoom est pas une propriété standard pour tous les navigateurs, je recommande l'utilisation de 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/

25
répondu Fırat Deniz 2016-06-07 06:37:59

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">' );

});

5
répondu Linden 2017-02-09 15:26:17

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
répondu dizel3d 2017-05-23 11:46:58