css - 如何为移动设备制作相同的网站布局

Question

我在使用一个网站时遇到问题。这是网站here .顶部导航栏在手机/平板电脑 View 中不正常。只在桌面上没问题。移动端查看图片:

我不想让它响应，但在手机或平板电脑上它应该与滚动相同的布局。导航代码没有问题。问题是关于持有导航的 div。因为如果我删除导航并只使用文本，它会遇到同样的问题:

div的HTML代码:

<div class="outer top">
    <div class="inner">
        <div class="nav">
            <ul>
                <li>....</li>
                <li>....</li>
                <li>....</li>
            </ul>
        </div>
    </div>
</div>

CSS代码:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    border: 0 none;
    font-size: 100%;
    margin: 0;
    padding: 0;
    vertical-align: baseline;
}

body {
    background: url(../images/bg.png) repeat-x #fff;
    color: #fff;
    font-family: Helvetica, Myriad Pro, Verdana;
    font-size: 14px;
    line-height: 1em;
}

.outer {
    width: 100%;
    float: right;
    display: block;
}

.top {
    background: #004481;    
}

.inner {
    width: 940px;
margin: 0 auto;
}

我使用了 100% 的宽度。但是，在手机/平板电脑上仍然不行。你能给我一个解决方案吗...

Answer 1

我将您的代码放在 jsbin 中，但无法看到您所看到的内容。你能添加更多代码吗？

http://jsbin.com/ologix/1/edit