Question

我已经厌倦了找到问题的答案。我想要一个可以从移动设备或类似设备看到的网站。我并不是说响应而是我的意思，从移动访问者甚至通过水平鼠标滚动可以看到相同的网站布局。每个网站都可以这样做。不需要任何代码。通过水平鼠标滚动的移动设备通常可以看到相同的布局。但是，我对一个场景感到困扰。我已经建立了一个例子。 Here is it..

如果您从移动设备或类似设备（如小型笔记本电脑等）看到该网站（或调整为小型浏览器），您会看到：

你看到蓝色div无法填充浏览器的100％宽度，尽管div被定义为100％宽度！查看该图像下方的灰色div。在正常阶段，蓝色（div.top）和灰色（div＃gcontent）div都是浏览器的中心，但在小屏幕上，灰色div填充100％宽度，其中蓝色div未能填充100％宽度。什么原因。我该如何解决？

它的结构：

<body>
    <!-- top start -->
    <div class="outer top">
        <div class="inner">
            <div class="nav">
                <p>Lorem Ipsum is simply dummy text .... of Lorem Ipsum.</p>
            </div>
        </div>
    </div>
    <!-- top end -->
    <!-- wrapper start -->
    <div class="wrapper">
        <!-- header start -->
        <div id="header">
            <div class="logo">
                <a href="index.html"><img src="images/logo.png" width="124" height="104" alt="logo" /></a>
            </div>
            <h1>WELCOME</h1>
        </div>
        <!-- header end -->
        <!-- content start -->
        <div id="content">
            <P>Lorem Ipsum is simply dummy text ... of Lorem Ipsum.</P>
            <P>Lorem Ipsum is simply dummy text ... of Lorem Ipsum.</P>
            <P>Lorem Ipsum is simply dummy text ... of Lorem Ipsum.</P>
        </div>
        <!-- content end -->
    </div>
    <!-- wrapper end -->
</body>

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;
}

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

.outer {
    width: 100%;
    float: left;
    display: block;
}
.top {
    background: #009999;    
}

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

}
.wrapper {
    width: 940px;
    margin: 0 auto;
    text-align: left;

}

#header {
    width: 100%;
    float: left;    
}

h1 { font-weight: normal; }
h2 { font-size: 22px; font-weight: normal; }
h3 { font-size: 15px; font-weight: normal; }
p { font-size: 12px; }
.logo a {
    display: block;
    width: 124px;
    height: 104px;
    margin: 31px 46px 0 10px;
    float: left;
}

#header h1 {
    font-size: 23px;
    text-transform: uppercase;
    font-family: 'HelveticaNeueLTStd-Bd-75';
    color: #004481;
    padding: 110px 0 33px 0;    
}

#content {
    width: 100%;
    float: left;
    background: #b2b0b0;
    margin: 0 0 200px 0;
    -moz-box-shadow: 1px 0 5px 5px #acacac;
    -webkit-box-shadow: 1px 0 5px 5px #acacac;
    box-shadow: 1px 0 5px 5px #acacac;  
}

在某些日子之前，我在这里问过类似的问题。但是，我没有找到解决方案。有人告诉我内部div（宽度：940px）的问题，它为小屏幕创建了这个问题。但是，我的观点是蓝色div（div.top）位于外部div，其宽度为100％。所以，为什么内部div对此负责！有人告诉我为小屏幕制作不同的样式表。虽然，我无法理解这个问题，但解决方案不应该简单吗？但是，如果最后它是为小屏幕制作不同样式表的唯一解决方案，那么该场景的代码是什么？基本上，我正在制作这个similar structure的网站，我需要很多这样的网站：

.outer {
   width: 100%;
   float: left;
}
.inner {
  width: 940px;
  margin: 0 auto;
}

我不希望该网站有响应。但是，至少访问者不应该从移动设备上看到这种情况（蓝色或div.top：宽度：100％不能填充100％的浏览器）。所以，请给我一个解决方案，用简单的方式为任何小屏幕填充浏览器的100％宽度。在我看来，添加一个或两个行外部div的行代码可以解决问题，但我不知道那是什么代码:( 提前谢谢！

Answer 1

如果您设置width: 100%;之类的规则，在这种情况下，对于您的css完成方式，100％来自浏览器大小，而不是来自实际网站的宽度。您的网站的宽度约为940px，但在移动设备上，浏览器尺寸较小。

尝试添加如下规则：

html {
   min-width: 940px;
}

可能这就足够了。

使用min-width代替普通width，对于宽度较长的浏览器（如桌面），该网站的外观与现在相同，调整结果如下仅适用于宽度较小的浏览器。

Answer 2

问题是指定蓝色背景的div也是100％宽度。当100％宽度小于940px时，蓝色背景将小于包含文本的div。您可以更改站点，使其没有固定的940px宽度，或将top类应用于包含文本的同一div（使用inner类）。

Answer 3

只需将其添加到HTML的头部

即可

    <meta name='viewport' content='width=device-width, initial-scale=1 />

如何为移动设备制作相同的网站布局（无响应）

3 个答案: