自动将移动浏览器强制转换为桌面视图

Question

完成了一个使用Paypal IPN来启动付款的项目，并发现在桌面浏览器上成功，但在移动设备上（至少是Chrome）完全失败。

经过一些研究，我发现这是因为移动浏览器使用GET方法返回Paypal数据，而桌面端使用POST方法。

如果我在移动浏览器上点击“请求桌面视图”，则允许流程正确完成，但这显然对最终用户不太友好。

因此，由于我在这方面遇到了一些困境（我实际上被建议这是一个没有控制权的Paypal问题-不确定是否真的如此），请问是否有一种方法可以自动强制在移动浏览器上显示桌面视图作为最后的办法？

我尝试更改视口宽度 (<meta name="viewport" content="width=1024">)，但这只会扩大移动浏览器视图。实际上并不能像手动点击“请求桌面视图”那样提供适当的桌面视图。

请问是否有人知道通过HTML或JS强制显示桌面视图的方法？

谢谢，
丹。

- Daniel Underwood

Answer 1

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

但如果您有单独的移动版和桌面版索引，则可以使用此脚本：

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

- ajbee

---

嗨，我没有为此单独的索引。我尝试使用视口进行测试，但不幸的是没有成功。谢谢。 - Daniel Underwood

Answer 2

所以，我相信这就是答案......在Paypal沙盒中做了这么多工作来做好一切，最后我决定告诉最终用户他们必须进入桌面模式进行移动浏览器并从那里开始，略有不便。

然后我将链接从沙盒更改为live Paypal。然后在桌面或移动设备上都无法正常工作！一个完全不同的登录界面出现在实时版本中，这意味着我所有的沙盒调整都没有用。然而，新界面的url与导致问题的移动版本类似。

我注意到大部分Paypal数据都被提取了出来，然后我恍然大悟。虽然它将txn_id详细信息放入我的数据库中，但我的支付处理页面仍然依赖于这些详细信息才能完全成功。这些数据没有被快速输入到数据库中，因此信息无法被捕获。

在我的付款处理页面顶部，我输入了sleep(15);来暂停该过程并给予足够的时间让信息输入到数据库中。现在看起来一切都运行良好。

- Daniel Underwood

Answer 3

我有类似的需求，并通过将meta标签initial-scale值从1更改为0.1来使其正常工作。

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

- siva surya

Answer 4

将width设置为initial确实解决了我的问题。问题在于我没有正确地测试它。所以，直到现在我的代码都是好的。

然后添加一个媒体查询CSS，我们可以在其中切换视图。在我的情况下：在移动视图上，单击.responsive-off时切换到桌面视图，并在需要切换回来时单击.responsive-on。

因此，切换器可以在同一页上，不需要独立的cookie依赖页面。

示例：

$(function() {

  $("#responsive-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');
  });

});

/*to mobile switcher from desktop on mobile*/

@media (min-width: 1024px) {
  #responsive-on {
    display: block;
  }
  #responsive-off {
    display: none;
  }
}


/*to desktop switcher on mobile*/

@media (max-width: 1024px) {
  #responsive-on {
    display: none;
  }
  #responsive-off {
    display: block;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div id="responsive-switcher">
  <span id="responsive-on"><strong>Click to switch to mobile view</strong> <br/><i>(this switches back to mobile freiendly viewport on mobile</i></span><span id="responsive-off"><strong>Click to switch to desktop view</strong> <br/><i>(this shows on screen smaller then 1024px)</i></span>
</div>

- iorgv