Question

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

那么，一旦你拥有innerWidth和innerHeight的值，你如何使用这些信息并使其适应整个网页布局？！？！

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

P.S。我正在使用分辨率为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');
    });

Answer 1

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

<小时/> 实际上，在重新阅读您的问题时，您要求的是“缩放”，您可以使用body {transform: scale(sw, sh)}执行此操作其中sw为$win.width() / 1440而sh为$win.height() / 900（或宽度正确的版本，或1如果您不想更改）
transform尚未完全实施，因此您需要-webkit-transform，-moz-transform，-o-transform和transform

如何通过javascript检测到屏幕分辨率数据到网络

1 个答案: