FullPage.js paddingTop在不同的屏幕尺寸上出现问题

Question

我正在使用fullpage.js用于我正在构建的网站，但在设置paddingTop设置和正确显示屏幕方面存在很多问题。

例如：

这是13英寸Macbook Air上的Chrome http://cl.ly/image/1D2P1S3Z291W

以下是iPad 2（垂直）视图上的屏幕：http://cl.ly/image/1m2M3H1E2E3n

问题在于顶部的差距。差距出现在大于13英寸笔记本电脑的屏幕上

这是我的JavaScript：

    $('.fullPage').fullpage({
        responsive: 768,
        autoScrolling: false,
        anchors: ['home', 'customResearch', 'onlineCommunities', 'buzzSection', 'ourStorySection', 'howWeWorkSection', 'aliciaProfile', 'patProfile', 'clientsSection', 'experienceSection', 'contactUs'],
        easing: 'easeInOutCubic',
        fixedElements: '#mainNav',
        fitToSection: false,
        verticalCentered: true,
        loopHorizontal: false,
        scrollOverflow: false,
        css3: true,
        paddingTop: '147px',
        resize: false,
        afterLoad: function(anchorLink, index) {

            if($.inArray(anchorLink, ['aliciaProfile', 'patProfile'])) {
                var parent = $('[data-anchor="' + anchorLink + '"]');

                if(isElementInViewport(parent)) {
                    animateProfileSubImages(parent);
                }
            }

            var expTblCell = $('#experience').find('.fp-tableCell');
            $(expTblCell).attr('style', '');
        }
    });

HTML正文中没有填充。我只是需要顶部图像部分直接位于所有屏幕上的导航下方（无论屏幕尺寸如何）