Facebook, Instagram and Twitter do not return the correct viewing height

Question

I have been looking for a fix for this that works in all of these social browsers, or at least on facebook over the past few weeks, and has yet to figure out something or find something useful. The last few posts I looked at may not work for me.

I tried

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

View meta>

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

Also tried this JS

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

Interesting, maybe this script, which I saw somewhere, could work, but I'm not sure how to implement it correctly.

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

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

Can someone please help me with this, I will hire someone at this moment.

What should look like

Which browser Facebooks visits / cuts off.

Answer 1

This is a common problem with a viewport not defined for the Preview browser.

I found https://github.com/rodneyrehm/viewport-units-buggyfill quite effective. You need to include the .js file and initialize it

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