Facebook, Instagram ve Twitter tarayıcıları uygun görünüm yüksekliğini döndürmüyor

Question

Bu sosyal tarayıcılarda veya son birkaç hafta boyunca en azından facebookta çalışan ve henüz bir şey anlamayacak bir düzeltme çalışması arıyordum. yararlı bir şey bulmak. Bu yeniden boyutlandırma işlevlerine baktığım son birkaç ileti benim için çalışmadı. Ben

JS

denedim

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

Ayrıca çalıştı

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

CSS

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

Görünüm meta etiketi Bu

JS

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

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

onResize(); 

Belki bir yerde gördüğüm bu betiğin çalışıp çalışmadığını merak ediyordum - ama nasıl düzgün bir şekilde uygulanacağından emin değilim. Birisi bana bu konuda yardım edebilir

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

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

, bu noktada birini işe edecektir. o

Ne Facebooks tarayıcı bitkileri gibi bakmak gerekiyordu ne

/keser.

Answer 1

Bu değil belirli viewport ile ortak bir sorundur oldukça verimli https://github.com/rodneyrehm/viewport-units-buggyfill bulunan "önizleme" tarayıcı

için. Yalnızca .js dosyasını dahil ve başlatmak zorunda o

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