2015-09-08 42 views
0

我只是在我的網站上添加了可伸縮性,但是當我縮放時,導航也會縮放。所有設備(特別是移動設備)上的,當頁面放大時,導航也會放大。無論視口縮放如何保持導航大小相同?CSS如何在無導航縮放的情況下對網站進行縮放

我試過提到這個問題,但不能解釋它。如果這是我正在尋找的東西,有人可以幫忙解釋一下嗎?

我創建了這個JSFiddle,但它是移動的,我不確定它是否會有所幫助。

導航:

<nav> 
<div> 
<a href="/"> 
    <div id="logo"><img src="http://www.lehigh.edu/google/google_search.png" alt="Home"/></div> 
    <div id="headtag"><img src="http://codeboxr.com/wp-content/uploads/2012/06/6_logo_predesign.jpg" alt="Home"/></div> 
    <div id="tagline"><img src="https://www.google.com/logos/doodles/2014/world-cup-2014-2-4845213826678784.3-hp.gif" alt="Home"/></div> 
</a> 
</div> 
<div> 
<a href="/" class="here">Home</a> 
<a href="/about.php">About</a>  
<a href="/services.php">Services</a> 
<a href="/pricing.php">Pricing</a> 
<a href="/contact.php">Contact Us</a> 
<!--input id="srchbar" type="search" placeholder="Search"--> 
</div> 
</nav> 

https://jsfiddle.net/foeLo3xx/ 1)不縮小 enter image description here

2)上移動(IPhone 5S放大) enter image description here

+0

仍然沒有得到你所要求的?所有設備(特別是移動設備)上的 – divy3993

+0

,當頁面放大時,導航也會放大。無論視口縮放如何保持導航大小相同? – blackRob4953

+0

我建議你使用高度和寬度屬性的百分比(%)。 – divy3993

回答

0

不幸的是,沒有很好的/可靠的方式達到你想要的。

一種粗糙的方法是檢測縮放級別的變化,然後動態調整您的導航欄容器的當前屏幕寬度。但是,實現這一點並不重要。關於如何檢測屏幕尺寸here的另一個答案解釋了難點。

+0

好的,我該如何解決這個問題?我假設需要JavaScript,我是新的,不熟悉它 – blackRob4953

相關問題