我如何放大/縮小我的網站，而不影響部分

我做了這個腳本：我如何放大/縮小我的網站，而不影響部分

<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

我如何放大/縮小我的網站，而不影響部分

回答

相關問題