Facebook，Instagram和Twitter浏览器未返回正确的视口高度

Question

我一直在寻找一个适用于所有这些社交浏览器的解决方案，或者至少在过去几周内至少可以使用facebook，并且尚未找到任何有用的内容或找到任何有用的内容。我看过设置调整大小功能的最后几篇帖子对我来说无效。

我试过

JS

function _fixViewportHeight() {
    var html = document.querySelector('html');

    function _onResize(event) {
        html.style.height = window.innerHeight + 'px';
    }

    window.addEventListener('resize', _.debounce(_onResize, 125, {
        leading: true,
        maxWait: 250,
        trailing: true
    }));

    _onResize();
}

_fixViewportHeight();

CSS

html, body, .fullpage-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
}

视口元标记

<meta name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi">

还试过这个JS

window.addEventListener("resize", function(){
  onResize();
});

function onResize(){
  document.querySelector("html").style.height = window.innerHeight + "px"
 setTimeout(function(){$(window).scrollTop(0)}, 1000);
};

onResize();

想知道我看到某个地方的脚本是否可行 - 但我不确定如何正确实施它。

FB.Canvas.getPageInfo(
    function(info) {
        alert('Width: ' + info.clientWidth + ' Height: ' + info.clientHeight);
    }
);

https://developers.facebook.com/docs/reference/javascript/FB.Canvas.getPageInfo/

有人可以帮我解决这个问题，此时我会聘请某人。

它应该是什么样的

Facebook浏览器裁剪/切断了什么。

Answer 1

这是视口不是特定于“预览”浏览器的常见问题

我发现https://github.com/rodneyrehm/viewport-units-buggyfill效率很高。您只需要包含.js文件并对其进行初始化

viewportUnitsBuggyfill.init({
  force: true, // use for debug on desktop
  refreshDebounceWait: 300 // good for performance
});