Possible to redirect to different browser?

Ask the community
,
1

Ive published my site and shared it with a couple select friends. However, I noticed that when opening the shared link through facebook or facebook messenger on Android mobile, it opens my site in facebook’s own mobile browser, which displays elements poorly- text spread across multiple lines, spacing issues, overlapping, etc.

I’ve tested my site on both desktop and mobile (mac/iOS/Windows/Android), and all display as desired, its just facebook’s browser on Android (iOS looks fine) that causes issues. This will be quite severe, as most of my audience will be directed from facebook, and likely on a mobile device.

Is there a way to test for the browser type, and redirect to say, a safari or chrome browser? Or any other tips anyone can give to try to mitigate this issue would be greatly appreciated!

EDIT: I’ve done some more looking online, and found a potential solution (for non-Wix hosted sites) :

function isFacebookApp() {
    var ua = navigator.userAgent || navigator.vendor || window.opera;
    return (ua.indexOf("FBAN") > -1) || (ua.indexOf("FBAV") > -1);
}
if (isFacebookApp() {
    // go to lightbox or page stating to open page in Chrome or Safari, etc for better experience
}
else {
    // go to page as normal
}

Now trying to implement this into my Wix site, it seems like I have to add a router page to handle these requests. I followed the documentation here to create a router page, but the rest of the instructions surpasses my knowledge to get this working. Here’s what I have in the routers.js, but am unsure of how to achieve the same results as the above code:

export function router_Router(request) {
 let userAgent = request.userAgent;
 if (IsFacebookApp(request)) {
      console.log(userAgent)  // never executes
   }
 else {
      console.log(userAgent)  // also never executes
   }

function IsFacebookApp(request) {
 let ua = request.userAgent;  // unsure how to get the "navigator.vendor || window.opera" parameters as seen in above code, but may not be needed, as I believe the substrings tested below are in the userAgent string
 return (ua.indexOf("FBAN") > -1) || (ua.indexOf("FBAV") > -1);
}

I’m hoping that this solution won’t interfere too much with users not using the facebook browser, and can be fairly seamless

2

I found the issue to be caused by Facebook’s browser displaying text slighter bigger than other browsers. This caused text elements which were tight to the boundaries of the box to wrap more than in other browsers, causing the overlapping, poor spacing, etc.

I went through all pages and all elements, adjusting the text boxes, making some fonts smaller, moving them, etc. Eventually, I got the pages to display close enough to the “proper” layout. It took some time, and was a bit of a pain in the ass, but I guess thats website compatibility testing for ya