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

【问题标题】：Automatically force mobile browser to desktop view自动强制移动浏览器进入桌面视图
【发布时间】：2016-12-15 22:01:49
【问题描述】：

在使用 Paypal IPN 发起付款的项目上完成了大量工作后，我发现这在桌面浏览器上是成功的，但在移动设备上完全 100% 失败（至少在 Chrome 上）。

经过一番研究，我发现这是由于移动浏览器使用 GET 方法返回 Paypal 数据，而不是桌面使用 POST。

如果我在移动浏览器上单击“请求桌面视图”，则该过程将正常完成，但这对最终用户来说显然不是很有趣。

所以，由于我已经走到了一个死胡同（实际上我被告知这是一个无法控制的 Paypal 问题 - 不确定是否真实），有没有办法自动强制在移动浏览器上使用桌面视图作为最后的手段？

我已尝试更改视口宽度 (<meta name="viewport" content="width=1024"> )，但这只是拓宽了移动浏览器视图。它实际上并没有像手动单击“请求桌面视图”那样提供正确的桌面视图。

请问有人知道是否有办法通过 HTML 或 JS 强制进入桌面视图吗？

谢谢，
丹。

【问题讨论】：

标签： javascript jquery html mobile

【解决方案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');
}

【讨论】：

嗨，我没有单独的索引。我已经尝试使用视口进行测试，但不幸的是我没有得到任何乐趣。谢谢。

【解决方案2】：

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

然后我将链接从沙盒更改为实时 Paypal。然后在台式机或移动设备上都没有任何效果！实时版本出现了一个完全不同的登录界面，这意味着我所有的沙盒修补都是徒劳的。但是，新界面的 url 与导致问题的移动版本相似。

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

所以它可以在同一页面上显示内容；不需要额外的/单独的页面。

【讨论】：