2014-05-20 14 views
8

Come posso disabilitare TUTTO lo zoom del viewport per una pagina web a cui si accede tramite IE11 su WinRT?Disabilita tutto lo zoom di pagina in IE11 su Windows8-Arm

Sto lavorando a un'applicazione che esegue il proprio disegno su un'area di dimensioni per adattarla al viewport e fornisce internamente la sua funzionalità di zoom. Avere lo zoom del browser fa quindi un casino della tela.

Vado attraverso risposte esistenti, e nessuno di loro sembra funzionare per questo plaform:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
o
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
o
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
o
<meta name="viewport" content="user-scalable=no" />
o
<meta name="viewport" content="width=device-width" />

Nel <header> non hanno alcun effetto.

Inoltre, mi piacerebbe bloccare lo zoom a doppio tocco, ma i vari frammenti di jQuery che ho visto non sembrano funzionare nemmeno qui.

risposta

23

Arrrgh, quindi non appena ho fatto la domanda, ho trovato una soluzione:

Aggiunta:

html 
{ 
    -ms-content-zooming: none; /* Disables zooming */ 
    touch-action: none; /* Disable any special actions on tap/touch */ 
} 

al CSS per la pagina dell'applicazione sembra bloccare correttamente pinch-zoom in IE, e disabilita tutte le azioni speciali attivate toccando/toccando due volte.

+2

OMG questo funziona. È stato così difficile scoprire come bloccare lo zoom dell'utente per la mia app cordova windows (telefono) 10 (che utilizza il motore Microsoft Edge). Grazie mille. – MoOx

-1

uso questo

var zoomlevel=1; 

    $("body").dblclick(function(ev) { 
     zoomlevel = zoomlevel == 1 ? 2 : 1; 



     $(this).css({ 
      "-moz-transform":"scale("+zoomlevel+")", 
      "-webkit-transform":"scale("+zoomlevel+")", 
      "-o-transform":"scale("+zoomlevel+")", 
      "-ms-transform":"scale("+zoomlevel+")" 
     }); 


    }); 
+0

Non funziona. IE è strano. L'unica cosa che sembra funzionare è il css '-ms-content-zooming: none; touch-action: none; 'come nella mia risposta. –