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

mklgxw1f  于 2023-04-19  发布在  Java
关注(0)|答案(4)|浏览(143)

在完成了一个使用Paypal IPN发起支付的项目的大量工作后,我发现这在桌面浏览器上是成功的,但在移动的上完全失败(至少在Chrome上)。
经过一些研究,我发现这是由于移动的浏览器使用GET方法返回Paypal数据,而不是使用POST的桌面。
如果我在移动的浏览器上点击“请求桌面视图”,那么这将允许该过程正确完成,但这显然对最终用户来说不是很有趣。
所以,我已经走到了一个死胡同(我实际上已经被告知这是一个贝宝的问题,有没有控制-不确定是否正确与否),有没有一种方法可以自动强制桌面视图在移动的浏览器作为最后的手段?
我已经尝试过更改视口宽度(<meta name="viewport" content="width=1024">),但这只是扩大了移动的浏览器的视图。它实际上并没有给予正确的桌面视图,因为你可以手动点击“请求桌面视图”。
请问有没有人知道是否有一种方法可以通过HTML或JS强制桌面视图,请?
谢啦

e4eetjau

e4eetjau1#

通常<meta name="viewport" content="width=1024">在某些情况下就足够了。
但是如果你有mobiledesktop版本的单独索引,那么你可以使用这个脚本:

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

cuxqih212#

所以,我相信这是答案...!在贝宝沙盒中做了这么多工作来做正确的事情,作为最后的手段,我决定只是通知最终用户,他们将不得不进入桌面模式为他们的移动的浏览器,并从那里去,轻微的不便.
然后我把我的链接从沙盒更改为实时Paypal。然后无论是在桌面还是移动的上都没有任何效果!一个完全不同的登录界面出现在实时版本中,这意味着我所有的沙盒修补都是徒劳的。然而,新界面有一个类似于移动版本的URL,这导致了问题。
我注意到大多数的Paypal数据被拉过,然后它在我身上恍然大悟.虽然它是把txn_id的细节到我的数据库,我的支付处理页面是依赖于这些细节在数据库中完全成功.这些数据没有被输入到数据库中的信息被捕获足够快.
在我的支付处理页面的顶部,我输入sleep(15);来停止这个过程,并给予信息足够的时间进入数据库。现在一切似乎都工作正常。

rdrgkggo

rdrgkggo3#

我也有类似的需求,并通过将 meta标记的初始值从1更改为0.1来使其工作。

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

ego6inou4#

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>

相关问题