如何在不影响部分的情况下放大/缩小我的网站答案

【问题标题】：How can I zoom in/out my website without affecting sections如何在不影响部分的情况下放大/缩小我的网站
【发布时间】：2014-06-16 09:41:02
【问题描述】：

我制作了这个脚本：

<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 它只是没有按预期滑动，我认为 &anchor 计算错误。

PS：该网站在 Firefox 上无法正常运行... :(

【问题讨论】：

好的，伙计们，我看到了问题所在，我只需要你的帮助...在滑块的这行中：scrollTop: $($anchor.attr('href')).offset ().top 它只是没有按预期滑动，我认为 &anchor 计算错误。
滚动顶部的链接在哪里？
我应该让您知道您的网站无法在 Firefox 中正常运行。菜单甚至菜单句柄都不会出现在屏幕上。我只设法用 Chrome 来完成这项工作。
@Bindiya Patoliya 你好，如果你点击顶部中间的“加号”三角形，你可以访问导航。
@António Sérgio Simões Boas，não sei se percebes em Português xD 我知道，不幸的是，我没有时间对我的网站在 Firefox 上的工作进行适当的更改 :(，但感谢您的警告

标签： javascript jquery html

【解决方案1】：

建议？看起来您正在尝试做的是让您的页面占用所有可用空间。通常，这不是通过缩放完成的。你完全可以不用脚本。

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

通常人们使用这样的解决方案（在他们的样式表中）：

html, body
{
    height: 100%;
}

但是，body 的内容可能需要动态更改。将 min-height 设置为 100% 即可实现此目标。

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

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

【讨论】：

好的，谢谢回复，很有用。再讲几件事，就这个。我已经计算了 100% 的变化，假设我希望它是“69%”，我试过这个：document.getElementsByTagName('html')[0].style.height = "69%"。所以它没有用：X
看看这个：jsfiddle.net/8nWJC。没有必要使用 javascript 来完成 css 可以为您做的事情。不幸的是，您可能需要调整网站的大部分内容以使其符合最佳实践:(

【解决方案2】：

好的，伙计们，我找到了这个特殊情况的解决方案。

问题是我使用的是 .offset().top 并且因为我听说这个 jquery 中有一个带有转换的错误。我为 javascript ".offsetTop" 更改了 .offset() 并且一切都开始正常工作了。

你可以在这个stackoverflow问题中看到偏移函数的区别：

offsetTop vs. jQuery.offset().top

【讨论】：