javascript - 使用 Javascript 调整页面宽度

Question

我的页面结构如下:

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

编辑

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

对于不同分辨率的设备是否有更好的方法来实现这一点，以便当我按下 (Ctrl)+(-) 时，页面仍然变小，显示其他 屏幕。我怎样才能让页面保持在中间，而不显示其他屏幕。

这是图片:

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

Answer 1

怎么样:

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