0

我有这个简单的页面布局：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">        
        <meta name="viewport" content="width=device-width">
        <style>
            body {
                text-align: center;
                margin: 0;
                padding: 0;
            }
            .header {
                width: 100%;
                height: 50px;
                background: url('http://tinyurl.com/o8w87av') 50% 0 no-repeat;
            }
            .outer {
                width:960px;
                height: 300px;
                background: #dadada;
                margin: 0 auto;
            }
            .footer {
                width: 100%;
                height: 50px;
                background: #000;
            }
        </style>                        
    </head>
    <body>
        <div class="header"></div>
        <div class="outer"></div>
        <div class="footer"></div>
    </body>
</html>

在台式机上它工作正常，但在手机或平板电脑上不行。我认为宽度存在一些问题：100%；但我不知道如何解决它。

我发现了一些有趣的事情：

  1. 我把这个 HTML+CSS 代码放到 jsfiddle ( http://jsfiddle.net/STXmQ/ ) 上，在我的手机或桌子上也有同样的问题
  2. 但是，当我在桌面上将 jsfiddle 转换为全屏模式（http://jsfiddle.net/STXmQ/embedded/result/）时就可以了，在我的手机和桌面上也可以！

我的布局的在线版本

非常感谢你帮助我！

已解决：感谢马克西米利安霍夫曼的建议，我能够弄清楚。我只是将 min-width: 960px 添加到页眉和页脚，现在它可以正常工作了。

4

2 回答 2

2

您的外部 div 的绝对宽度为 960px，这就是它在移动设备上比其他 div 更宽的原因。将其宽度更改为最大宽度，它应该缩小到视口宽度。

于 2013-10-05T20:54:16.843 回答
-1

感谢马克西米利安霍夫曼的建议，我能够弄清楚。我只是将 min-width: 960px 添加到页眉和页脚，现在它可以正常工作了。

于 2013-10-05T21:35:52.587 回答