Question

我遇到了麻烦。如果您在移动设备上查看此网站或将浏览器调整为手机大小，请向下滚动，然后一直向上滚动，徽标会变得非常大。我需要它像开头一样小（刷新页面）： http://www.baycrest.org/birdie4baycrest/

我确实有CSS断点，但由于某些特定的东西，我正在使用JS。这是我的JS代码：

$(window).scroll(function () {
    if ($(document).scrollTop() == 0) {        
        $('.logo').attr('src', '/birdie4baycrest/images/logobig3.jpg');
        $('.logo').width(203);
        $('.logo').height(293);
     } else {

        $('.logo').attr('src', '/birdie4baycrest/images/logobig.jpg');
        $('.logo').width(108);
        $('.logo').height(70);
     }
});

Answer 1

这是基于我之前评论的解决方案。在Chrome Inspector中对您的网站进行了测试和处理。

$(window).scroll(function () {
    if ($(document).scrollTop() == 0) {

        $('.logo').attr('src', '/birdie4baycrest/images/logobig3.jpg');

        if( $(window).width() < 768 ){
            // logo loads at small size with a width of 104 and height of 150
            $('.logo').width(104);
            $('.logo').height(150);
        } else {
            // this is what the default is for large sizes
            $('.logo').width(203);
            $('.logo').height(293);
        }

    } else {

        $('.logo').attr('src', '/birdie4baycrest/images/logobig.jpg');
        $('.logo').width(108);
        $('.logo').height(70);

    }
});

Answer 2

了解引导程序，它使您能够轻松创建自适应网页设计here ，以帮助您走上正确的轨道。

移动设备上的徽标变得很大（Javascript）

2 个答案: