Come posso zoom in/out il mio sito web senza che interessano le sezioni

Question

ho fatto questo script:

<script> 
     $(document).ready(function() { 

      var huser = window.screen.availHeight; 
      var wuser = window.screen.availWidth ; 

      var scr_zoom = Math.round((wuser*69)/1280); 

      document.body.style.zoom = scr_zoom + "%" 
      document.head.style.zoom = scr_zoom + "%" 


}); 

</script> 

Che la mia pagina web di zoom in base alle dimensioni dello schermo dell'utente. Funziona bene, ma il problema è che nella mia navigazione:

<div id="panel"> 
    <ul class="nav"> 
     <a href="#section1"><li id="hm">home</li></a> 
     <a href="#section2"><li id="abt">about</li></a> 
     <a href="#section3"><li id="wk">work</li></a> 
    </ul> 
</div> 

Ho anche un cursore attaccato al menu:

 $(function() { 
      $('ul.nav a').bind('click',function(event){ 
       var $anchor = $(this); 

       $('html, body').stop().animate({ 
        scrollTop: $($anchor.attr('href')).offset().top 
       }, 1500,'easeInOutExpo'); 
       event.preventDefault(); 
      }); 
     }); 

E questo definisce la mia sezioni:

.section{ 
    margin:0px; 
    height:1000px; 
    width:100%; 
    float:left; 
    /* text-shadow:1px 1px 2px #f0f0f0; */ 
    overflow:hidden; 
    z-index:29; 
} 

Everytime clicco sulla sezione "work" o "about" Semplicemente scorrendo in una posizione diversa. Qualche idea del perché questo sta accadendo?

Si può vedere il problema, qui dentro:

http://testedesignfranjas.tumblr.com/

Quello che ho scoperto finora ...

In questo le linee del cursore: scrollTop: $ ($ anchor.attr ('href')). offset(). top Semplicemente non scivolare come previsto, cosa che l'ancora & è errata calcolata.

PS: Il sito non lavorare bene su firefox ... :(

Answer 1

Ok ragazzi, ho trovato la soluzione per questo caso particolare.

Il problema era che stavo usando .offset(). Top e da quando ho sentito che c'è un bug in questo jquery con le trasformazioni. Ho cambiato .offset() per il javascript ".offsetTop" e tutto ha funzionato bene.

Potete vedere le differenze di funzioni di offset in questa domanda StackOverflow:

offsetTop vs. jQuery.offset().top

Answer 2

Un suggerimento Sembra che ciò che si sta cercando di fare è rendere la vostra pagina di occupare tutto lo spazio a disposizione in generale?. , questo NON è fatto con lo zoom.Ti può fare senza lo script.

Lo zoom è generalmente riservato per l'utente in modo che possano ingrandire e ridurre la pagina (ad esempio per le persone che necessitano di screen reader, ecc.

In genere le persone utilizzano una soluzione come questa (nel loro foglio di stile):

html, body 
{ 
    height: 100%; 
} 

Tuttavia, il contenuto del corpo probabilmente dovrà cambiare in modo dinamico. Impostare l'altezza minima al 100% raggiungerà questo obiettivo.

html{ 
    height: 100%; 
} 
body { 
    min-height: 100%; 
} 

Basta modificare questi in base alle proprie esigenze.