为“普通”大小的显示器开发的网站在宽屏幕中被搞砸了

时间:2011-03-09 11:27:53

标签: monitor

我创建了一个非常好的网站但后来去了一个朋友的家,网站在他的宽屏显示器上不成比例且几乎可怕。如果没有对网站进行大量重写,是否有一个脚本可以为宽屏显示器或其他替代方案的用户调整网站大小?任何建议除了“正确重做您的网站”欢迎。谢谢!


编辑: 这是我的网站应该是这样的: http://img843.imageshack.us/img843/4453/22425853.jpg
以下是它在宽屏上的显示方式: http://img851.imageshack.us/img851/7494/racism.jpg

2 个答案:

答案 0 :(得分:4)

这取决于你如何进行布局。如果你没有使用绝对或固定的positiong,最简单的方法可能是在你的内容周围使用一个包装div并给它一个最大宽度,就像这样

<body>
    <div id="wrapper">
        <!-- all the content goes here -->
    </div>
</body>

和CSS

#wrapper {
    max-width: 960px;
    margin: 0 auto
}

编辑:如果您无权访问HTML,您可以保留CSS,如图所示并使用此jQuery行(它应该可以工作,但我还没有测试过)

$('body').wrapInner('<div id="wrapper" />')

编辑:我发现你不熟悉jQuery。应该在页面准备就绪时应该运行的代码应该包装如下:

$(function() {
    $('body').wrapInner('<div id="wrapper" />');
});

请告诉我这是否适合您。你可以尝试

$('#wrapper').attr('id');
在Firebug控制台中

检查是否已创建包装器div。

答案 1 :(得分:0)

在网站包装器上的css中设置max-width