自动强制移动浏览器进入桌面视图

Question

我完成了一个使用Paypal IPN进行付款的项目的大量工作，我发现这在台式机浏览器上是成功的，但在移动设备上（至少在Chrome上）完全失败了。

经过研究，我发现这是由于移动浏览器使用GET方法返回Paypal数据，而不是使用POST的台式机。

如果我在移动浏览器上单击“请求桌面视图”，则将允许该过程正确完成，但是对于最终用户而言，这显然不是一件好事。

因此，由于我对此陷入僵局（实际上我已经被告知这是贝宝（Paypal）问题，无法控制-不确定是否为真），有没有一种方法可以自动强制桌面在移动浏览器上查看是万不得已？

我试图更改视口宽度（ <meta name="viewport" content="width=1024"> ），但是所有这些操作都是为了扩大移动浏览器的视图。 实际上，它不能像手动单击“请求桌面视图”那样提供正确的桌面视图。

请问有人可以通过HTML或JS强制桌面视图吗？

谢谢，
担。

Answer 1

通常，在某些情况下， <meta name="viewport" content="width=1024">就足够了。

但是，如果您拥有针对mobile和desktop版本的单独索引，则可以使用以下脚本：

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

基本上，即使您使用移动设备，它也将被重定向到您的桌面版本。（我个人使用此方法）。

该脚本也可以在此链接中使用 。

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');
}

Answer 2

所以，我相信这就是答案...！ 在Paypal沙箱中做了很多工作以使事情变得正确，作为最后的选择，我决定只通知最终用户，他们将不得不进入移动浏览器的桌面模式并从那里转到那里，这带来了一些不便。

然后，我将链接从沙盒更改为实时贝宝。 然后，无论在台式机还是移动设备上都无法正常工作！ 实时版本出现了一个完全不同的登录界面，这意味着我所有的沙盒修补工作都一无是处。 但是，新界面的URL与导致问题的移动版本相似。

我注意到大多数Paypal数据都被提取了，然后它突然出现在我身上。 它正在将txn_id详细信息放入我的数据库中时，我的付款处理页面仍依靠数据库中的那些详细信息来完全成功。 此数据输入数据库的速度不足以捕获信息。

在付款处理页面的顶部，我输入了sleep(15); 停止该过程，并给信息足够的时间进入数据库。 现在看来一切正常。

Answer 3

将width设置为initial确实解决了我的问题。 问题是我没有正确测试。 因此，到目前为止我的代码还不错。

JQuery代码是：

$(function() {

$( ".respoonsive-off" ).click(function() {
   $('meta[name="viewport"]').prop('content', 'width=initial');
});
$( ".responsive-on" ).click(function() {
   $('meta[name="viewport"]').prop('content', 'width=device-width, initial-scale=1');
});

});

然后是响应式媒体查询CSS，我们可以通过它切换视图。 以我.responsive-off ：在移动视图到桌面视图.responsive-on当需要切换回.responsive-off和.responsive-on时。 有点像这样-但我想您会提前知道的：

@media (min-width: 1024px)/*or anything else you what this to show/hide*/{
        .respoonsive-on{
        text-decoration: none;
        display: block;
    }
    .respoonsive-off{
        text-decoration: underline;
        font-weight: bold;
        display: none;
    }

}
}
@media (max-width: 1024px){
            .respoonsive-on{
        text-decoration: underline;
        font-weight: bold;
        display: none;
    }
        .respoonsive-off{
        display: block;
        font-weight: normal;
    }
}

因此它可以在显示内容的同一页上； 无需其他/单独的页面。