我已经厌倦了寻找问题的答案。我想要一个可以从移动设备或类似设备上看到的网站。我不是说响应式，而是说，即使通过水平鼠标滚动，移动访问者也可以看到网站的相同布局。这对每个网站都是可能的。不需要任何代码。具有水平鼠标滚动的移动设备通常会看到相同的布局。但是，我遇到了一种情况。我已经建立了一个例子。就这个..
如果您从移动设备或类似设备（如小型笔记本等）（或调整为小型浏览器）看到该网站，您会看到：
您看到蓝色 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 的一个或两个行代码可以解决问题，但我不知道该代码是什么 :( 提前致谢！