Resize d'éléments selon la taille de la fenêtre

Bonjour !

Je suis graphiste dans une entreprise qui vend des produits de puériculture, et je dois créer un flipbook pour que l'on puisse feuilleter le catalogue sur notre site. J'ai trouvé le script turn.js que j'ai réussi à modifier pour arriver à un rendu satisfaisant mais pas parfait. En effet, Je maîtrise le HTML et le CSS mais je n'ai jamais appris à coder le Javascript qui me pose vraiment problème, cependant j'arrive à peu près à comprendre les contenus des scripts et à les modifier.

Je vous explique ma demande : le flipbook en question ne se resize que lorsque la width de la fenêtre arrive à la même width que celle du flipbook, ce qui fait que le menu à icônes du dessous disparaît et ne se resize pas de la même façon que le flipbook. Or dans l'idéal je souhaiterais que tout ce qui est à l'intérieur de mon body se redimensionne de façon proportionnelle à la taille de la fenêtre, et donc que je ne perde aucun élément. Je ne sais pas si vous avez besoin de tout le code, je vous copie ici le bout de code javascript que je soupçonne d'être responsable de cela !

// Set the width and height for the viewport
 
function resizeViewport() {
 
    var width = $(window).width(),
        height = $(window).height(),
        options = $('.magazine').turn('options');
 
    $('.magazine').removeClass('animated');
 
    $('.magazine-viewport').css({
        width: width,
        height: height
    }).
    zoom('resize');
 
 
    if ($('.magazine').turn('zoom')==1) {
        var bound = calculateBound({
            width: options.width,
            height: options.height,
            boundWidth: Math.min(options.width, width),
            boundHeight: Math.min(options.height, height)
        });
 
        if (bound.width%2!==0)
            bound.width-=1;
 
             
        if (bound.width!=$('.magazine').width() || bound.height!=$('.magazine').height()) {
 
            $('.magazine').turn('size', bound.width, bound.height);
 
            if ($('.magazine').turn('page')==1)
                $('.magazine').turn('peel', 'br');
 
            $('.next-button').css({height: bound.height, backgroundPosition: '-38px '+(bound.height/2-32/2)+'px'});
            $('.previous-button').css({height: bound.height, backgroundPosition: '-4px '+(bound.height/2-32/2)+'px'});
        }
 
        $('.magazine').css({top: -bound.height/2.79, left: -bound.width/2});
    }
 
    var magazineOffset = $('.magazine').offset(),
        boundH = height - magazineOffset.top - $('.magazine').height(),
        marginTop = (boundH - $('.thumbnails > div').height()) / 1.9;
 
    if (marginTop<0) {
        $('.thumbnails').css({height:1});
    } else {
        $('.thumbnails').css({height: boundH});
        $('.thumbnails > div').css({marginTop: marginTop});
    }
 
    if (magazineOffset.top<$('.made').height())
        $('.made').hide();
    else
        $('.made').show();
 
    $('.magazine').addClass('animated');
     
}

Pour que vous visualisiez ce dont je parle, vous trouverez le flipbook à cette adresse : http://babybus.fr/flipbook/samples/magazine/index

J'espère avoir été claire dans mes explications et que quelqu'un saura m'éclairer :) merci d'avance !