Question

我认为，我的问题很简单，但让我发疯。

仅在移动设备上，当我滚动页面时，英雄形象才开始变大一点。这会对页面产生可怕的影响，似乎可以为某些内容充电。当我在我的电脑上尝试一些东西时，看到响应式设计没有任何反应。它发生在我在真实手机上试用时。

http://www.thefactoryhair.netsons.org/ 这是我的网站。错误在辅助页面中更明显。英雄形象的高度为VH。

请帮帮我:(

Answer 1

简单的答案是删除vh作为衡量标准。这听起来很刺耳，但不幸的是，这要归功于现代移动浏览器。

当您在移动浏览器上向下滚动页面时（我刚刚在手机上使用Chrome测试过），网址栏会缩短。一旦发生这种情况，视口高度就会增加，导致所有使用vh的元素“跳转”。

使用em，px或百分比等测量值。如果您特别需要根据屏幕高度设置某些内容（意味着其他任何选项都不可行），您可以尝试使用jQuery调整屏幕大小。

以下是一些可用于调整元素高度的示例代码，这意味着只有在页面重新加载时，它才会在视口调整大小时进行调整。

$(document).ready(function(){
  $('#fullscreen').css({'height':$(window).height()*1});
});

您可以将#fullscreen替换为您要调整的元素，并将1替换为0.7，使其成为窗口高度的70％而不是100。

这一切都有意义吗？