Facebook, Instagram, and Twitter browsers not returning proper viewport height

user_2659001 0
Viewed 1453

I've been looking for a fix for this that works across all of these social browsers or at least facebook for the last few weeks and have yet to figure anything out or find anything helpful. The last few posts I've looked at that setup resize functions have failed to work for me.

I've 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;
}

Viewport meta tag

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

Was wondering if maybe this script I saw somewhere could work - but I'm not sure how to properly implement it.

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 point.

What it's supposed to look like

enter image description here

What Facebooks browser crops/cuts off.

enter image description here

instagram viewport facebook css javascript
1 Answers

This is common problem with viewport not specific to "preview" browser

I found https://github.com/rodneyrehm/viewport-units-buggyfill quite efficient. You only have to include .js file and initialize it

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