Jak mogę powiększyć/pomniejszyć moją stronę bez wpływu sekcjach

Question

Zrobiłem ten skrypt:

<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> 

To zoom moja strona w zależności od wielkości ekranu użytkownika. To działa dobrze, ale problemem jest to, że w moim nawigacji:

<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> 

Mam również suwak zaatakowany do 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(); 
      }); 
     }); 

I ta określa swoje sekcje:

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

Everytime klikam na sekcji "praca" lub "o" To po prostu ślizga się do innej lokalizacji. Jakieś pomysły, dlaczego tak się dzieje?

Można zobaczyć problemu, tu:

http://testedesignfranjas.tumblr.com/

Co odkryłem tak daleko ...

W tej linii suwaka: scrollTop: $ ($ anchor.attr ('href')). offset(). top To po prostu nie przesuwa się zgodnie z oczekiwaniami, rzeczy, kotwica & jest źle obliczona.

PS: Witryna nie robi dobrze na Firefox ... :(

Answer 1

Ok chłopaki, znalazłem rozwiązanie dla tego szczególnego przypadku.

Problem polegał na tym, że używałem .offset(). Top i od kiedy usłyszałem, że w tym jquery jest błąd z transformacjami. Zmieniłem .offset() dla javascript ".offsetTop" i wszystko zaczęło działać dobrze.

Widać różnice w funkcjach offsetowych w tej kwestii stackoverflow:

offsetTop vs. jQuery.offset().top

Answer 2

Sugestia wygląda na to, co próbujesz zrobić, to strona zająć całą dostępną przestrzeń w ogóle?. , NIE jest to robione z zoomem.) Możesz całkowicie zrezygnować ze skryptu:

Zoom jest ogólnie zarezerwowany do użytku przez użytkownika, dzięki czemu może powiększać i pomniejszać swoją stronę (np. dla osób potrzebujących czytników ekranu itp.

Ogólnie ludzie używają rozwiązania takiego jak to (w swoim arkuszu stylów):

html, body 
{ 
    height: 100%; 
} 

Jednak treść ciała prawdopodobnie będzie musiała ulec dynamicznej zmianie. Ustawienie minimal-wysokości na 100% pozwoli osiągnąć ten cel.

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

Po prostu dostosuj je do swoich potrzeb.