简体   繁体   中英

how to adapt screen resolution data to web once already detected by javascript

I've navigated and looked all the internet for solutions but this issue seems veeery difficult. There is a lot of tutorials to how to detect the screen resolution of the user. This is done with innerWidth and innerHeight. My question would be the next step. Which code should you have to adapt this information to your whole website?!

So, once you have the value of innerWidth and innerHeight how do you use this information and adapt it to a whole web layout?!?!

I have this similar code which loads pictures and adapt them to the screen resolution, it works. But how I could transform this code to make my whole web adapt to the screen resolution of the user? Should I tag it to html?!?! How do you do this?!?!

PS I'm using a computer with resolution of 1440x900. It looks fine in this resolution but once you have a smaller or bigger resolution it breaks down...

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

Set document.documentElement.style.maxHeight and document.documentElement.style.maxWidth


Actually, on re-reading your question, you're asking for something like a "zoom", you can do this with body {transform: scale(sw, sh)}
where sw is $win.width() / 1440 and sh is $win.height() / 900 (or an aspect-correct version of the width, or 1 if you don't want to change it)
transform isn't fully implemented yet so you'll need -webkit-transform , -moz-transform , -o-transform and transform

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM