使用Javascript调整页面宽度

时间:2012-12-30 09:04:41

标签: javascript html css slider

我的页面具有以下结构:

<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'}); 

修改

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

是否有更好的方法可以为不同的分辨率设备实现此功能,因此当我按(Ctrl)+(-)时,页面仍会变小,显示另一个screens。如何在不泄露其他screens的情况下使页面保持在中间位置。

这是图片: enter image description here

我尝试的一件事是:如果我在container中设置px元素的宽度,我会得到所需的结果。但是,我无法预先设置container(其宽度我使用($(window).width())设置的宽度,因为它取决于不同的设备。

3 个答案:

答案 0 :(得分:2)

怎么样:

width: auto

width: 100%

因为它是您页面的大多数父容器...

修改后对问题进行了解析: 要使容器始终“居中”而不是左对齐,您可以使用:

margin: auto

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

答案 1 :(得分:2)

怎么样:

$(window).resize(function() {
  var pageSize= $(window).width();
   $("#container").css({width: (pageSize) + 'px'}); 
});

答案 2 :(得分:0)

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

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

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

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