仅当屏幕高度发生变化时如何调整页面大小

Question

我有一个关于响应式页面的问题。我的网站有一个页面，在苹果 macbook air 上看起来不错。然而，当我从妈妈的笔记本电脑上查看我的网站时，屏幕将主页截断了一半，因为她的屏幕更小。我有响应式图像并使用了小屏幕的媒体查询，但是当我的页面在较小的屏幕上时，我似乎无法让我的页面看起来不错。当我改变屏幕的宽度时，图像会调整大小，而不是如果我只改变高度。为什么不？我试图通过只针对小高度进行媒体查询来解决此问题，但这也不起作用。如何确保我的页面在较小的高度上也看起来不错？

如果您需要代码，我可以发布它或发送一个 github 链接，一个或另一个。 :)

Answer 1

您可以通过 jquery 获取 div 的高度并将高度设置为 css。您可以按照以下代码按照自己的方式进行自定义。

 $(window).on("scroll",function(e){
    var scroll = $(window).scrollTop();    
    if (scroll > 100 ) {
         var height = $('.height-of-the-div-you-want').innerHeight();
         // alert(height);
         $('.set-this-height-dynmicallty').css('height', height);
     }
});