我正在构建一个非响应式网站，其页眉和页脚横跨浏览器窗口的整个宽度。在宽度为 100% 的 DIV 内部，我嵌套了宽度为 1000px 的 div，其中包含页眉、导航和页脚内容。
我的问题是，在移动设备上查看网站时，导航和页脚被缩小到略小于网站的页眉和主要区域的大小。
奇怪的是，导航和页脚受到影响，而页眉没有问题(使用相同的方法构建)。
我怎样才能让一切按比例缩放？整个网站和所有主要 div 的宽度都是 1000 像素，那么为什么它们在移动设备上以不同的尺寸出现？
这是网站的 URL:http://www.test-site.co.nf
这是一个代码示例:
HTML:
</head>
<body>
<div id="container">
<div id="header">
<div id="header-content">
<div id="logo">
<a href="index.html"><img src="img/ama-party-rentals-logo.png" height="98" width="500"/></a>
</div>
<div id="social-icons">
<a href="" target="_blank"><img class="social" src="img/icons/facebook.png" height="40" width="40"/></a>
<a href="" target="_blank"><img class="social" src="img/icons/googleplus.png" height="40" width="40"/></a>
</div>
</div>
</div>
<div id="nav-bar">
<div id="nav">
<ul id="ul-nav">
<li><a href="">Home</a></li>
<li><a href="">Products</a></li>
<li><a href="">Company</a></li>
<li><a href="">Past Events</a></li>
<li><a href="">Contact Us</a></li>
<li><a href="">Francais</a></li>
</ul>
</div>
</div>
CSS:
#header {
background-color:#84B13F;
width:100%;
height:150px;
border-bottom-style:solid;
border-bottom-color:#648830;
border-bottom-width:5px;
}
#header-content
{
width:1000px;
height:150px;
text-align:center;
margin:auto;
background-image:url('img/top-banner.png');
}
#nav-bar
{
width:100%;
height:50px;
background-color:#84B13F;
border-bottom-style:solid;
border-bottom-color:#648830;
border-bottom-width:5px;
}
#nav
{
clear:both;
margin:auto;
height:50px;
width:1000px;
text-align:center;
}
最佳答案
好吧，我想通了:
我的问题是我有一个包装整个站点的容器 DIV。在那个容器中，我将高度设置为 100%，但没有定义宽度。我将最小宽度设置为 1020px 瞧；不再有损坏的、截断的 div。我的页眉和页脚 div 设置为 100% 宽度缩小，但整个网站的宽度缩放停止在 1020 像素，因此我的所有内容都按照我希望在移动设备和桌面上显示的方式显示。感谢所有回复的人!
关于css - 移动浏览器中的 Div 宽度调整不均匀，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21974622/