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
body {transform: scale(sw, sh)}
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.