0

我已经浏览并查看了所有互联网的解决方案，但这个问题似乎非常困难。有很多关于如何检测用户屏幕分辨率的教程。这是通过innerWidth 和innerHeight 完成的。我的问题将是下一步。您应该使用哪个代码将此信息适应您的整个网站？！

那么，一旦你有了 innerWidth 和 innerHeight 的值，你如何使用这些信息并将其调整到整个 Web 布局？！？！

我有这个类似的代码，它可以加载图片并使其适应屏幕分辨率，它可以工作。但是我如何转换这段代码以使我的整个网络适应用户的屏幕分辨率呢？我应该将其标记为 html 吗？！？！你怎么做到这一点？！？！

PS 我正在使用分辨率为 1440x900 的计算机。在这个分辨率下看起来不错，但是一旦你有一个更小或更大的分辨率，它就会崩溃......

$(window).load(function() {
    var randomImages = ['img1','img2','img3','img4','img5'];
    var rndNum = Math.floor(Math.random() * randomImages.length);

     var $win = $(this);
     var iMac = $(window).width() > 1920 ? '_imac' : '';
     var $img = $('#background').attr('src', '_img/bg/index_rnd/' + randomImages[rndNum] + iMac + '.jpg').css({'position':'fixed','top':0,'left':0});
        function resize() {
            if (($win.width() / $win.height()) < ($img.width() / $img.height())) {
              $img.css({'height':'100%','width':'auto'});
            } else {
              $img.css({'width':'100%','height':'auto'});
            }
        }
        $win.resize(function() { resize(); }).trigger('resize');
    });
4

1 回答 1

-1

设置document.documentElement.style.maxHeight和document.documentElement.style.maxWidth

实际上，在重新阅读您的问题时，您要求诸如“缩放”之类的东西，您可以使用body {transform: scale(sw, sh)}
where swis$win.width() / 1440和shis $win.height() / 900（或宽度的方面正确版本，或者1如果您不想更改it)
transform尚未完全实现，因此您需要-webkit-transform, -moz-transform,-o-transform和transform

于 2012-08-23T14:12:16.537 回答