自動強制移動瀏覽器進入桌面視圖

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

基本上，即使您使用移動設備，它也將被重定向到您的桌面版本。（我個人使用此方法）。

該腳本也可以在此鏈接中使用 。

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沙箱中做了很多工作以使事情變得正確，作為最后的選擇，我決定只通知最終用戶，他們將不得不進入移動瀏覽器的桌面模式並從那里轉到那里，這帶來了一些不便。

然后，我將鏈接從沙盒更改為實時貝寶。 然后，無論在台式機還是移動設備上都無法正常工作！ 實時版本出現了一個完全不同的登錄界面，這意味着我所有的沙盒修補工作都一無是處。 但是，新界面的URL與導致問題的移動版本相似。

我注意到大多數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當需要切換回.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;
    }
}

因此它可以在顯示內容的同一頁上； 無需其他/單獨的頁面。