web-dev-qa-db-fra.com

Forcer automatiquement le navigateur mobile à la vue du bureau

Ayant effectué beaucoup de travail sur un projet qui utilise Paypal IPN pour initier des paiements, j'ai constaté que cela fonctionnait avec succès sur un navigateur d'ordinateur de bureau, mais échouait complètement à 100% sur mobile (sous Chrome, au moins).

Après quelques recherches, j'ai constaté que cela est dû au fait que le navigateur mobile utilise la méthode GET pour renvoyer les données Paypal, par opposition au bureau utilisant POST.

Si je clique sur "Demander une vue du bureau" sur le navigateur mobile, le processus se déroulera correctement, mais ce n'est évidemment pas très amusant pour l'utilisateur final.

Donc, comme je suis arrivé dans une impasse avec cela (on m'a en fait informé que c'était un problème Paypal sur lequel il n'y avait aucun contrôle - je ne sais pas si c'était vrai ou pas), existe-t-il un moyen de forcer automatiquement le bureau afficher sur un navigateur mobile en dernier recours?

J'ai essayé de changer la largeur de la fenêtre d'affichage (<meta name="viewport" content="width=1024"> ), Mais tout ce que cela fait est d'élargir la vue du navigateur mobile. En fait, il ne donne pas la vue de bureau appropriée, comme vous auriez pu l'obtenir en cliquant sur "Demander une vue de bureau" manuellement.

Quelqu'un peut-il savoir s'il existe un moyen de forcer l'affichage en mode bureau via HTML ou JS, s'il vous plaît?

Merci,
Dan.

javascriptjqueryhtmlmobile
7
Daniel Underwood

Donc, je crois que c'est la réponse ...! Après avoir tant travaillé dans le bac à sable Paypal pour bien faire les choses, en dernier recours, j'ai décidé d'informer simplement l'utilisateur final qu'il lui faudrait passer en mode bureau pour son navigateur mobile et partir de là, léger inconvénient.

Ensuite, j'ai changé mes liens de sandbox en live Paypal. Ensuite, rien ne fonctionnait ni sur le bureau ni sur le mobile! Une interface de connexion complètement différente est apparue pour la version en direct, ce qui signifie que tous mes bricolages en bac à sable ne servaient à rien. Cependant, la nouvelle interface présentait une URL similaire à celle de la version mobile à l'origine du problème.

J'ai remarqué que la plupart des données Paypal étaient transmises, puis elles se sont révélées. Alors que les détails txn_id étaient placés dans ma base de données, ma page de traitement des paiements s’appuyait sur le fait que ces détails se trouvaient dans la base de données pour réussir pleinement. Ces données n'ont pas été entrées dans la base de données assez rapidement pour que les informations puissent être capturées.

En haut de ma page de traitement des paiements, j'ai entré sleep(15); pour interrompre le processus et laisser suffisamment de temps aux informations pour entrer dans la base de données. Maintenant, tout semble bien fonctionner.

4
Daniel Underwood

Généralement, <meta name="viewport" content="width=1024"> suffit dans certains cas.

Mais si vous avez un index séparé pour les versions mobile et desktop, vous pouvez utiliser ce script:

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

Fondamentalement, même si vous utilisez mobile, il sera redirigé vers votre version de bureau (personnellement, j'utilise cette méthode).

Ce script fonctionne également dans ce 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
jt25

Régler width sur initial résout mon problème. Le problème était que je ne l'ai pas testé correctement. Donc, mon code était bon jusqu'à présent. 

Le code JQuery est:

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

});

Et puis et une requête média réactive css avec laquelle nous pouvons changer de vue. Dans mon cas: sur la vue mobile à la vue bureau, lorsque vous cliquez sur .responsive-off et .responsive-on lorsque vous devez revenir en arrière. D'une certaine manière, comme ceci - mais je pense que vous avez compris l'idée à l'avance:

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

Donc, il peut être sur la même page le contenu est affiché; pas de pages supplémentaires/séparées nécessaires.

0
iorgu