Question

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

<!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％;但我无法弄清楚如何解决它。

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

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

Online version of my layout

非常感谢你帮助我！

已解决：感谢Maximilian Hoffmann的建议，我能够弄明白。我只是将min-width：960px添加到页眉和页脚，现在它正常工作。

Answer 1

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

Answer 2

感谢Maximilian Hoffmann的建议，我能够弄明白。我只是将min-width：960px添加到页眉和页脚，现在它正常工作。

中心布局不适用于移动/桌面设备

2 个答案: