Today I’ve noticed on a client’s website that the Facebook Webview broke some of the mobile design I built on webflow because it made the viewport smaller than a mobile browser’s. After scratching my head a bit and searching stack overflow for ideas I’ve gathered bits and pieces of scripts to adapt my CSS in case of facebook app viewing disaster 
I’m no JS / Jquery expert so if you have ways of making this better… be my guest
This tip is good for you if :
— You want to adapt your mobile design to display correctly when viewed through facebook app
— You know / understand CSS
You need 3 things to happen :
write functions that
1 - Check if you’re in the Facebook app
2 - If yes adapt CSS of specific classes
and
3 - launch this magic when the document is ready
According to where your display issue is happening you can either add the code to
the specific page custom code or site settings if you need it everywhere.
It looks like that :
What you need to update with your specific css parameters and class names is
$('.YOUR-CLASS-NAME').css('PARAM', 'VALUE'); // Update css
Here’s the code if you want to copy-paste
<script>
function isFacebookApp() {
var ua = navigator.userAgent || navigator.vendor || window.opera;
return (ua.indexOf("FBAN") > -1) || (ua.indexOf("FBAV") > -1);
}
function adaptCSSFbBrowser() {
var ua = navigator.userAgent || navigator.vendor || window.opera;
if (isFacebookApp(ua)) { // Facebook in-app browser detected
$('.YOUR-CLASS).css('PARAM', 'VALUE'); // Update css
}
}
$(document).ready(function() {
adaptCSSFbBrowser();
});
</script>
Cheerz