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

【问题标题】：Facebook, Instagram, and Twitter browsers not returning proper viewport heightFacebook、Instagram 和 Twitter 浏览器未返回正确的视口高度
【发布时间】：2017-05-31 17:52:27
【问题描述】：

在过去的几周里，我一直在寻找适用于所有这些社交浏览器或至少 facebook 的解决方案，但尚未解决任何问题或发现任何有用的东西。我查看的最后几篇文章设置调整大小功能对我不起作用。

我试过了

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 浏览器裁剪/截断的内容。

【问题讨论】：

“想知道我在某处看到的这个脚本是否可以工作” - 不；这是针对 Canvas 应用程序的，而您的则不是。 // 有什么理由首先需要任何 JS 干预？这些设备上是否发生了任何调整大小事件？
@CBroe 啊谢谢！因为 Facebook 和其他社交浏览器似乎没有在视口高度中计算其页眉/页脚。调整大小事件是页眉和页脚进入屏幕/视口
@alcoven 你有没有找到解决这个问题的方法？
你有没有试过让一个元素达到 100% 高度，然后测量它的有效高度？

标签： javascript css facebook instagram viewport

【解决方案1】：

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

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

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

【讨论】：

也许你应该解释一下这个 buggyfill（包含许多针对不同问题的修复）如何解决这个特定问题。我会很有帮助的！