如何在不影響部分的情況下放大/縮小我的網站

Question

我制作了這個劇本：

<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上運行良好...... :(

Answer 1

一條建議？ 看起來你要做的就是讓你的頁面占用所有可用空間。 通常，這不是通過縮放完成的。 你可以完全沒有腳本。

縮放通常保留供用戶使用，以便他們可以放大和縮小頁面。 （例如，對於需要屏幕閱讀器的人等）。

一般來說，人們使用這樣的解決方案（在他們的樣式表中）：

html, body
{
    height: 100%;
}

然而，身體的內容可能需要動態改變。 將min-height設置為100％將實現此目標。

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

只需調整這些以滿足您的需求。

Answer 2

好的，我找到了這個特殊情況的解決方案。

問題是我正在使用.offset（）。頂部，因為我聽說這個jquery中存在一個帶有轉換的錯誤。 我為javascript“.offsetTop”更改了.offset（），這一切都開始正常了。

您可以在此stackoverflow問題中查看偏移函數的差異：

offsetTop vs. jQuery.offset（）。top