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

Question

在使用 Paypal IPN 发起付款的项目上完成了大量工作后，我发现这在桌面浏览器上是成功的，但在移动设备上完全 100% 失败（至少在 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 沙箱中做了很多工作以确保一切正常后，作为最后的手段，我决定只通知最终用户，他们的移动浏览器必须进入桌面模式，然后从那里开始，这会带来轻微的不便。

然后我将链接从沙盒更改为实时 Paypal。然后无论是在桌面还是移动设备上都不起作用！实时版本出现了完全不同的登录界面，这意味着我所有的沙盒修补都是徒劳的。然而，新界面的 URL 与导致问题的移动版本类似。

我注意到大部分 Paypal 数据都被转移了，然后我突然意识到。当它将 txn_id 详细信息放入我的数据库时，我的支付处理页面依赖数据库中的这些详细信息才能完全成功。此数据输入数据库的速度不够快，无法捕获信息。

在付款处理页面的顶部，我输入

sleep(15);

来停止流程，并为信息提供足够的时间进入数据库。现在一切似乎都运行良好。

Answer 3

我有类似的要求，并通过将元标记初始比例值从 1 更改为 0.1 来使其工作。

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

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>