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

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

此脚本也适用于此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');
}

Answer 2

所以，我相信这就是答案......！在Paypal沙箱中完成了大量工作以使事情变得正确，作为最后的手段，我决定告知最终用户他们必须进入桌面模式才能使用移动浏览器，并从那里开始，稍有不便。

然后我将链接从沙箱更改为直播Paypal。然后在桌面或移动设备上都无效！实时版本出现了一个完全不同的登录界面，这意味着我的所有沙盒修补程序都是无用的。但是，新界面的网址类似于导致问题的移动版本。

我注意到大多数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时单击。大概是这样-但我想您会提前想到的：

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

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

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

3 个答案: