0

我已经厌倦了寻找问题的答案。我想要一个可以从移动设备或类似设备上看到的网站。我不是说响应式，而是说，即使通过水平鼠标滚动，移动访问者也可以看到网站的相同布局。这对每个网站都是可能的。不需要任何代码。具有水平鼠标滚动的移动设备通常会看到相同的布局。但是，我遇到了一种情况。我已经建立了一个例子。就这个..

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

您看到蓝色 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(width: 940px) 的问题，这为小屏幕造成了这个问题。但是，我的观点是蓝色 div(div.top) 位于宽度为 100% 的外部 div。那么，为什么内部 div 对此负责！有人告诉我为小屏幕制作不同的样式表。虽然，我无法理解这个问题，但解决方案不应该很简单吗？但是，如果最终它是为小屏幕制作不同样式表的唯一解决方案，那么该场景的代码将是什么？基本上，我正在制作一个类似结构的网站，我需要很多这样的地方：

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

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

4

3 回答 3

1

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

只需尝试添加这样的规则：

html {
   min-width: 940px;
}

大概，这就够了。

通过使用min-width，而不是 plain width，在具有较长宽度的浏览器（如桌面）的情况下，该站点将看起来与现在相同，并且调整将仅适用于具有较小宽度的浏览器。

于 2013-08-20T04:49:38.810 回答
0

只需将其添加到 HTML 的头部

    <meta name='viewport' content='width=device-width, initial-scale=1 />
于 2013-08-20T05:05:45.373 回答
0

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

于 2013-08-19T20:20:25.060 回答