web-dev-qa-db-ja.com

モバイルブラウザを自動的にデスクトップビューに強制

Paypal IPNを使用して支払いを開始するプロジェクトで多くの作業を完了した結果、これはデスクトップブラウザーでは成功していますが、モバイル（少なくともChrome）では完全に失敗することがわかりました。

調査の結果、POSTを使用するデスクトップとは対照的に、モバイルブラウザーがGETメソッドを使用してPaypalデータを返すことが原因であることがわかりました。

モバイルブラウザーで[デスクトップビューの要求]をクリックすると、プロセスが正常に完了しますが、エンドユーザーにとって明らかに楽しいことではありません。

だから、これで行き止まりに近づいたとき（実際には制御できないというPaypalの問題だと忠告されています-trueかどうかわからない）、自動的にデスクトップを強制する方法があります最後の手段としてモバイルブラウザーで表示しますか？

ビューポートの幅を変更しようとしました（<meta name="viewport" content="width=1024">）ですが、これはモバイルブラウザの表示を広げるだけです。 「Request Desktop View」を手動でクリックすることで得られるような、実際には適切なデスクトップビューを提供しません。

HTMLまたはJSを介してデスクトップビューを強制する方法があるかどうか誰かが知っていますか？

おかげで、
ダン。

javascriptjqueryhtmlmobile
12
Daniel Underwood

通常<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');
}
6
jt25

だから、これが答えだと思います...！ Paypalサンドボックスで多くの作業を行って物事を正しく行った後、最後の手段として、モバイルブラウザをデスクトップモードにしてそこから移動する必要があることをエンドユーザーに通知することにしました。

次に、リンクをサンドボックスからライブPaypalに変更しました。その後、デスクトップでもモバイルでも何も機能しませんでした！ライブバージョンでは完全に異なるログインインターフェースが表示されました。つまり、サンドボックスをいじくり回しただけでは何も起こりませんでした。ただし、新しいインターフェイスには、問題を引き起こしていたモバイルバージョンと同様のURLがありました。

Paypalのデータのほとんどが引き継がれていることに気づき、それから私はそれを発見しました。 txn_idの詳細をデータベースに入れている間、私の支払い処理ページは、データベースにある詳細が完全に成功することに依存していました。このデータは、情報をキャッチするのに十分な速さでデータベースに入力されていませんでした。

支払い処理ページの上部でsleep(15);と入力してプロセスを停止し、データベースに入力するのに十分な時間を情報に与えました。現在、すべて正常に動作しています。

4
Daniel Underwood

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

そのため、コンテンツが表示されているのと同じページに配置できます。追加/個別のページは必要ありません。

0
Sándor Zuboly