我如何放大/缩小我的网站，而不影响部分

我做了这个脚本：我如何放大/缩小我的网站，而不影响部分

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

，根据用户的屏幕大小缩放的我的网页。它工作正常，但问题是，在我的导航：

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

我还袭击菜单滑块：

 $(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(); 
      }); 
     });

而且这个定义我的部分：

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

每次我点击“工作”部分或“关于”它只是幻灯片的错误到不同的位置。任何想法为什么发生这种情况？

你可以看到这个问题，在这里：

http://testedesignfranjas.tumblr.com/

我发现迄今...

在滑块的这行：scrollTop的：$（$ anchor.attr（'href'））。offset（）。top它只是不会像预期的那样滑动，我的东西锚点是错误的计算。

PS：网站不工作以及在Firefox ... :(

来源

2014-06-16 gn66

玉家伙，我看到了什么是错的，我只需要一点点你的帮助......在滑块的这段台词：scrollTop：$（$ anchor.attr（'href'））。offset（）。顶部它只是不按预期滑动，我的＆锚是beeing错误的计算。 – gn66

滚动顶部的链接在哪里？ –

我应该让你知道你的网站无法正常使用Firefox。菜单或菜单手柄不会出现在屏幕上。我只设法使这项工作与Chrome。 –

好吧，我找到了这个特例的解决方案。

问题是我使用.offset（）。top，因为我听说这个jQuery中有一个转换错误。我更改了javascript“.offsetTop”的.offset（），它都开始正常工作。

你可以看到在补偿功能的差异，这个计算器的问题：

offsetTop vs. jQuery.offset().top

来源

2014-06-18 12:14:23 gn66

一个建议，它看起来就像你正在试图做的是让你的页面占据所有可用空间是什么一般？，这不是通过缩放来完成的，你可以在没有脚本的情况下完成。

缩放通常保留给用户使用，以便他们可以放大或缩小页面（例如，对于需要屏幕阅读器的人员等））

一般情况下，人们使用这样的解决方案（在他们的样式表中）：

html, body 
{ 
    height: 100%; 
}

但是，body的内容可能需要动态改变。将最小高度设置为100％将实现此目标。

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

只需调整这些以满足您的需求。

来源

2014-06-18 10:39:56 cmroanirgo

好的，谢谢你的回复，这非常有用。告诉一些更多的事情，就这一点。我已经计算了100％的变化，可以说我希望它是“69％”，我试过这个： document.getElementsByTagName（'html'）[0] .style.height =“69％”。所以它没有工作：X – gn66

看看这个：http://jsfiddle.net/8nWJC/。有没有必要使用JavaScript的CSS可以为你做什么。不幸的是，您可能需要调整很大一部分网站才能使用最佳做法:( – cmroanirgo

我如何放大/缩小我的网站，而不影响部分

回答

相关问题