1

我的页面结构如下:

<container>
   <header>
   <main-content>
   <footer>
</container>

我正在使用javascript以下代码调整容器的宽度:

function getPageSize() {
            var de = document.documentElement;
            var w = window.innerWidth || self.innerWidth || (de && de.clientWidth) || document.body.clientWidth;
            var h = window.innerHeight || self.innerHeight || (de && de.clientHeight) || document.body.clientHeight;
            arrayPageSize = [w, h];
            return arrayPageSize;
        }
        $(document).ready(function () {
            var page = getPageSize();
            var x = page[0];
            var y = page[1];
            $("#container").css({width: (x) + 'px'}); 

编辑

现在,我正在使用一个滑块 [将 a 设置div为宽度9999em并在其中插入滑块元素]。当浏览器窗口最大化时,页面打开良好。

对于不同的分辨率设备,有没有更好的方法来实现这一点,这样当我按下 时(Ctrl)+(-),页面仍然会变得更小而显示另一个screens。我怎样才能使页面保持在中间,而不显示其他screens.

这是图像: 在此处输入图像描述

我实验的一件事是:如果我将container元素的宽度设置为px,我会得到想要的结果。但是,我无法预先container设置(我正在使用 ( $(window).width()) 设置的宽度,因为它取决于不同的设备。

4

3 回答 3

2

怎么样:

$(window).resize(function() {
  var pageSize= $(window).width();
   $("#container").css({width: (pageSize) + 'px'}); 
});
于 2012-12-30T09:47:16.113 回答
2

关于什么:

width: auto

或者

width: 100%

因为它是您页面的最父容器...

编辑后提出问题: 要使您的容器始终“居中”而不是左对齐,您可以使用:

margin: auto

使container始终处于中心位置..

于 2012-12-30T09:07:54.503 回答
0

你应该看看一些响应式 CSS 框架,它们为各种设备解决了这样的问题。一个例子是 Bootstrap(现在非常流行),但还有其他的。

无论如何,当我想在 Javascript/jQuery 中进行绝对控制时,我保持中心化的方式是:

var desiredWith = x;
var pad = ($(window).width() - desiredWidth) / 2;
$(selector).css({position: 'absolute', left: pad, right: pad, width: auto;});

这并不总是(通常?)在一些较旧的浏览器中工作,但我在一家不针对它们的公司工作,所以我不能告诉你哪些坏了。

于 2012-12-30T11:28:31.383 回答