手机上的视口

Question

我创建了一个网站，其外部包装器响应960px，然后容器内的所有内容都被修复（没有响应）。

问题是在移动设备上查看我得到一个大型网站，因为我的最小宽度容器为960px;

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

在这里小提琴：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中移除了min-width，添加了最大宽度为560px的.container。

希望能解决您的问题。