Question

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

我发现http://www.visualstudio.com/en-us/downloads这个MS网站也是如此，当我最小化网站时，我遇到了同样的问题。但是当我在移动设备上加载该页面时，网页会以完整的zom out模式加载，但是我放大并适合移动浏览器的页面。我有一个技巧，必须有一些技巧，使页面完全缩小，以便在移动中加载它不会破坏。

如果有人有任何想法，请分享。我做了一个简单的小问题来证明我的问题。 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/

Answer 2

很好的学习。我自己发现了问题。如果你没有按照响应式设计并有一些固定宽度，请不要使用此标签。

<meta name="viewport" content="width=device-width" />

我删除了它，它就像移动设备中的桌面一样工作..

位置：修复了在手机中加载时弄乱UI的问题

2 个答案: