html - 移动视口(viewport)

Question

我创建了一个网站，它有一个响应 960px 的外部包装器，然后容器内的所有内容都是固定的(不响应)。

问题是在移动设备上查看时我得到一个大网站，因为我有 960 像素的最小宽度容器；

这是我需要修复或添加的视口(viewport)问题吗？

在这里 fiddle :http://fiddle.jshell.net/6LgwF/1/

HTML:

<div class="wrapper" />

    <div class="container"

<h1>Welcome</h1><br />
My container is actually 960px only change it  to 560 for demo
    </div>

</div>

CSS:

.wrapper{
    width:100%;
    max-width:1440px;
    min-width:960px;
    background:grey;
}

.container{
    width:560px;
    background:pink;
    margin:0 auto;
}

Answer 1

试试这个:

.wrapper{
    width: 100%;
    max-width: 1440px;
    background: grey;
}

.container{
    max-width: 560px;
    background: pink;
    margin: 0 auto;
}

所以我从 .wrapper 中删除了最小宽度，在 .container 中添加了 560 像素的最大宽度。

希望能解决您的问题。