css - 位置 :Fixed messing up UI while loading in mobile

Question

我正在为移动和桌面构建一个单一的网站。我正在使用标题的固定位置来满足导航要求(如滚动 spy )。它在桌面版本中工作正常。当我尝试浏览相同的内容时在移动版中，因为我设置了最小宽度:850px；内容未在移动设备中正确显示。由于位置固定，我也无法拖动到标题。

我发现 http://www.visualstudio.com/en-us/downloads这个 MS 网站遵循相同的原则，当我最小化网站时，我遇到了同样的问题。但是当我在移动设备中加载该页面时，该网页以完全缩小模式加载，但我放大并使页面适合移动浏览器。我想一定有一些技巧可以使页面完全缩小，这样在移动设备中加载时它就不会中断。

如果有人有任何想法，请分享。我做了一个简单的文件来演示我的问题。 http://jsfiddle.net/rg46D/6/

   <div style="position: fixed; height: 70px; background-color: lightcoral;width:100%;min-width:950px">

P.S:我无法更改页面的最小宽度。

Answer 1

尝试移除最小宽度并在导航容器上放置一些填充:

<div class="header" style="position: fixed; background-color: lightcoral;width:100%;">
        <a href="#Home" style="padding-left:60px">Home</a>
        <a href="#Links" style="padding-left:60px">Links</a>
        <a href="#about" style="padding-left:60px">About</a>
        <a href="#Home" style="padding-left:60px">Link1</a>
        <a href="#Links" style="padding-left:60px">Link2</a>
        <a href="#about" style="padding-left:60px">LInk3</a>
    </div>

然后是 CSS:

.header {
    padding-bottom: 20px;
}

http://jsfiddle.net/rg46D/7/