CSS如何在没有导航缩放的情况下缩放网站

Question

我刚刚为我的网站添加了可扩展性，但是当我扩展时，导航也会随之扩展。 在所有设备（特别是移动设备）上，当页面放大时，导航也会随之放大。无论视口缩放如何，如何使导航保持相同的大小？

我尝试参考这个问题，但无法做出解释。如果这是我要找的，有人可以帮忙解释一下吗？

我创建了这个 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) 未缩放

2) 在手机上放大（iPhone 5s）

Answer 1

不幸的是，没有好的/可靠的方法可以实现您想要的。

一种粗略的方法是检测缩放级别的变化，然后将导航栏容器的大小动态调整为当前屏幕宽度。然而，实现这一目标并非易事。关于如何检测屏幕尺寸here 的另一个答案解释了这个困难。