Automatically force mobile browser to desktop view

Question

Having completed a lot of work on a project that uses Paypal IPN to initiate payments, I've found that this is successful on a desktop browser, but fails completely 100% on mobile (on Chrome, at least).

After some research, I've found that this is due to the mobile browser using the GET method for returning Paypal data, as opposed to the desktop using POST.

If I click on 'Request Desktop View' on the mobile browser then this will allow the process to complete properly, but this is obviously not great fun for the end-user.

So, as I've come to a bit of a dead end with this (I've actually been advised it's a Paypal issue that there's no control over - not sure if true or not), is there a way to automatically force the desktop view on a mobile browser as a last resort?

I've tried to change the viewport width (<meta name="viewport" content="width=1024"> ), but all this does is widen the mobile browser view. It doesn't actually give the proper desktop view as you would get by clicking on 'Request Desktop View' manually.

Would anyone know if there's a way to force to desktop view via HTML or JS, please?

Thanks,
Dan.

Solution 1

Usually <meta name="viewport" content="width=1024"> is enough in some cases.

But if you have separate index for mobile and desktop version then you can use this script:

        function parseUA() {
            var u = navigator.userAgent;
            var u2 = navigator.userAgent.toLowerCase();
            return { 
                trident: u.indexOf('Trident') > -1, 
                presto: u.indexOf('Presto') > -1, 
                webKit: u.indexOf('AppleWebKit') > -1, 
                gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, 
                mobile: !!u.match(/AppleWebKit.*Mobile.*/), 
                ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), 
                android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, 
                iPhone: u.indexOf('iPhone') > -1, 
                iPad: u.indexOf('iPad') > -1, 
                webApp: u.indexOf('Safari') == -1, 
                iosv: u.substr(u.indexOf('iPhone OS') + 9, 3),
                weixin: u2.match(/MicroMessenger/i) == "micromessenger",
                ali: u.indexOf('AliApp') > -1,
            };
        }
        var ua = parseUA();

        if (ua.mobile) {
            location.href = './pc.html';
        }

Basically even if your using mobile then it will be redirected into your desktop version.(Personally I use this method).

This script also works in this link.

var viewMode = getCookie("view-mode");
if(viewMode == "desktop"){
    viewport.setAttribute('content', 'width=1024');
}else if (viewMode == "mobile"){
    viewport.setAttribute('content', 'width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no');
}

Solution 2

So, I believe this is the answer...! Having done so much work in the Paypal sandbox to get things right, as a last resort I decided to just inform the end-user that they would have to go into desktop mode for their mobile browser and go from there, slight inconvenience.

Then I changed my links from sandbox to live Paypal. Then nothing worked either on desktop or mobile! A completely different login interface appeared for the live version, which meant all of my sandbox tinkerings were for nothing. However, the new interface had a url similar to the mobile version that was causing the problems.

I noticed that most of the Paypal data was being pulled across, and then it dawned on me. Whilst it was placing the txn_id details into my database, my payment processing page was relying on those details being in the database to fully succeed. This data wasn't being entered into the database fast enough for the info to be caught.

At the top of my payment processing page I entered sleep(15); to halt the process and give the information enough time to enter the database. Now it all appears to be working fine.

Solution 3

I had similar requirement and got it working by making a small change in the meta tag initial-scale value from 1 to 0.1 .

<meta name="viewport" content="width=device-width, initial-scale=0.1">