2016-03-07 59 views
0

我写了一个jQuery脚本,它检查浏览器的高度并与内容面板的高度进行比较。如果面板大于窗口高度,那么脚本会使所有内容变小。FF和Chrome的不同视图 - 找不到原因(也许FF错误?)

它适用于Chrome和Safari。在Firefox上它根本不工作。任何人都可以告诉我什么导致问题的详细?

链接到网站: http://design.maxxcoon.com/bestlife/webinar_chat/

+1

100%的我一样,确定我发现差异并回答。 –

+0

在Chrome(39.0)中没有看到任何缩放效果,FF(31.2)给我正常的最小/最大宽度缩放,就是这样。你可以通过像'font-size:calc(8pt + 1vh);'这样的方式在纯CSS中寻找效果,它会在8pt时锁定最小字体大小,但会为其增加1%的窗口高度,方式。 – abluejelly

+0

您必须重新加载以查看缩放效果。 – Shaggy

回答

0
$(document).ready(function() { 
    setTimeout(function() { 
     $(window).bind('resize', reSize($('#blocker'))); 
     $(window).trigger('resize'); 
     var windowSize = $(window).height(); 
     var containerHeight = $('.newcontainer').height() + 50; 
     var containerWidth = $('.newcontainer').width(); 
     var pixelToMuch = 0; 
     var divFactor = 0; 
     var newWidth = 0; 
     if (containerHeight > windowSize) { 
      pixelToMuch = containerHeight - windowSize; 
      divFactor = pixelToMuch * 1.67; 
      newWidth = containerWidth - divFactor; 
      $('.newcontainer').css('width', newWidth + 'px'); 
     } 
    }, 100); 
    setTimout(function() { 
     $('#chatfenster').css('height', $('.newcontainer').height() - 260 + 'px'); 
     $('#userlist').css('height', $('.newcontainer').height() - 350 + 'px'); 
    }, 150); 
}); 
+0

谢谢,但是这并没有解决我的问题:( 它仍然不工作在FF:http://design.maxxcoon.com/bestlife/webinar_chat/ – Shaggy