Procédure de programmation pour trouver le device-width dans Phonegap/JQuery mobile

J'ai besoin de trouver l'appareil-largeur de l'appareil mobile.
Même si l'on peut préciser le contenu

<meta name="viewport" content="width=device-width; user-scalable=no" />

Mais j'ai besoin de pour obtenir par programme l'appareil largeur pour calculer une certaine logique dans mon application. Comment puis-je obtenir de l'appareil largeur?

InformationsquelleAutor Coder_sLaY | 2012-02-28
  1. 41

    La viewport dimensions peuvent être recueillies par le biais de la window objet:

    var viewport = {
    width  : $(window).width(),
    height : $(window).height()
};

//can access dimensions like this:
//viewport.height

    Bien que vous ne serez pas toujours des résultats parfaits, les différents appareils se comportent différemment, ce qui donne le viewport dimensions, pas les dimensions de l'écran.

    Vous pouvez également vérifier la largeur d'un data-role="page" élément à trouver le device-width (depuis qu'il est défini à 100% de la device-width):

    var deviceWidth = 0;
$(window).bind('resize', function () {
    deviceWidth = $('[data-role="page"]').first().width();
}).trigger('resize');​​​
    • Hey jasper j'ai besoin d'obtenir ce dispositif largeur dans <body> de sorte que je peux placer myWidth comme ici <div id="espace réservé" style="width:myWidth;height:150px"></div>
    • Puis aller avec mon premier exemple: $('#placeholder').width($(window).width());.
    • Le jquery, le violon est mort maintenant. Pouvez-vous mettre à jour votre réponse, de sorte qu'il sera utile pour les futurs utilisateurs
    InformationsquelleAutor Jasper
  2. 18

    Pas sûr que la solution proposée fonctionne comme prévu. Êtes-vous sûr que vous obtenez la vraie device-width?

    Je suis en utilisant le code suivant dans mon application et il fonctionne très bien:

    function effectiveDeviceWidth() {
    var deviceWidth = window.orientation == 0 ? window.screen.width : window.screen.height;
    //iOS returns available pixels, Android returns pixels /pixel ratio
    //http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html
    if (navigator.userAgent.indexOf('Android') >= 0 && window.devicePixelRatio) {
        deviceWidth = deviceWidth / window.devicePixelRatio;
    }
    return deviceWidth;
}

    Espère que cela peut aider quelqu'un!

    • une grande fonction. cela m'a aidé. mais pour obtenir la bonne largeur pour moi, je le sens inverse : var deviceWidth = fenêtre.orientation == 0 ? de la fenêtre.de l'écran.hauteur : fenêtre.de l'écran.largeur;
    • Fonctionne très bien! J'ai également nécessaire d'inverser l'instruction conditionnelle comme llyas mentionné et il fonctionne.
    InformationsquelleAutor PlaTyPuS