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
});