Je veux un seul site qui utilise le même code HTML, mais « widgetizes » dans la meilleure façon pour la plate-forme, il est servi à.
Y at-il une pratique standard pour la fonction détection des périphériques mobiles / claviers matériels sur le client et de décider de charger jQuery Mobile avec interface utilisateur JavaScript ou jQuery mobile du site et un script pour une expérience de bureau? P>
ce qui suit apparaît comme un moyen raisonnable de le faire, mais je me demande si Modernizr.touch est la meilleure façon de détecter ce? .: toucher Obliger par exemple pourrait ne pas être la meilleure solution pour la surface. Est-il possible de détecter s'il y a aussi un clavier matériel p>
Modernizr.load({
test: Modernizr.touch,
yep : ['jquery-mobile.js','mobile.js']
nope: ['jquery-ui.js','desktop.js']
});
4 Réponses :
OK, je n'ai pas les appareils à ma disposition pour vérifier cela, mais la voie à suivre est quelque chose sur les lignes suivantes:
DPI ne peut pas être calculé directement de JS, mais est possible qui nous permet de calculer la diagonale de l'écran comme celle-ci Permettez-moi de répéter que je n'ai jamais fait de telle une chose avant et surtout dans ce premier morceau de code, il pourrait y avoir une erreur, mais quelque chose comme devrait être possible et je vérifierai ce soir si je n'oublie pas. Oh et il est bon de noter que cela Ne fonctionnera pas sur des ordinateurs de bureau, une vérification supplémentaire doit donc être indiquée si le DPI final est de 500 auquel cas il s'agit d'un système de bureau (bien que le userAgent peut également examiné pour cela). En outre, il peut être nécessaire de comprendre le -webkit-min-périphérique-duat-ratio-pixel-ratio également pour l'incorporer dans le calcul (en boucle simplement sur celui-ci jusqu'à ce que vous trouviez le rapport correct et multipliez le dpi par ce ratio).
Je t'aime tellement ton idée. C'est génial - trop triste que l'on ne puisse pas vraiment compter sur votre code. On pourrait penser que HTML5, JS et CSS3, tout ce genre de choses permettrait enfin de résoudre ce genre de problèmes.
On dirait que cela ne boucle pas sur le bureau, il reste donc à 50 ans.
Comme je l'ai dit: "Oh et il est bon de noter que cela ne fonctionnera pas sur des ordinateurs de bureau, il convient donc de procéder à une vérification supplémentaire si le DPI final est de 500 auquel cas il s'agit d'un système de bureau"
Je l'ai exécuté sur chrome Desktop et DPI final était de 50 ans, pas 500.
facepalm , oui, vous avez absolument raison, j'ai mal compris et mal interprété votre commentaire ...
Je viens de gérer quelques tests supplémentaires sur un périphérique iOS, il semble qu'il était nécessaire d'insérer dynamiquement une feuille de style et de modifier son contenu plutôt que d'utiliser la fenêtre.MatchMedia, mais la technique décrite est fonctionnelle (il suffit d'ajouter la mise à jour et Mécanisme de boucle que je vais faire et peut-être libérer en tant que script gedged complet).
Le moyen le plus simple consiste à détecter les agents de l'utilisateur que vous souhaitez cibler et charger le JavaScript approprié.
function load(src) {
var doc = document,
application = doc.createElement('script'),
script = doc.getElementsByTagName('script')[0];
application.type = 'text/javascript';
application.async = true;
application.src = src;
script.parentNode.insertBefore(application, script);
}
load(/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone|iemobile|tablet|Opera Mobi/i.test(navigator.userAgent) ? 'handheld.js' : 'desktop.js');
Je souhaite utiliser la détection de fonctionnalités, pas le navigateur reniflant. Je ne veux pas avoir à la mettre à jour à chaque fois qu'un nouveau téléphone sort.
Ce que vous demandez peut-être un appareil et non de la détection de fonctionnalités. Si j'ai un ordinateur de bureau qui est connecté à une écran tactile activé à 2048x1536 et 264PPI, si vous vérifiez la fonctionnalité, il sera indiscernable d'une iPad de rétine, car les deux ont les mêmes caractéristiques. C'est pourquoi vous devez le vérifier contre une matrice de périphérique et utiliser WURFL, tout le maintien sera pris en charge pour vous.
Les navigateurs peuvent mentir à Navigator.useragent afin de ne pas faire confiance, et si une fonctionnalité de périphérique détecte être identique à un iPad, il devrait obtenir le même site qu'un iPad. Ce qui manque est en mesure de définir Détecter si l'appareil dispose d'un clavier matériel. C'est ce que je demande. Je me rends compte que cela pourrait n'exister peut-être pas mais j'espère qu'un jour ce sera.
Si vous n'êtes pas marié à JQuery Ui et JQuery Mobile, alors Twitter Bootstrap La disposition du fluide fait un bon travail sans avoir à modifier HTML ou CSS pour différents appareils. Vous pouvez facilement le voir en allant au site Twitter Bootstrap et à ré-dimensionnez votre navigateur à différentes tailles.
Qu'est-ce que votre recherche en général est ce qu'on appelle Conception réactive . C'est basé sur des requêtes de média CSS et un peu de JavaScript généralement pour massage de la merde qui est que c'est-à-dire <9 pour rendre correctement. L'autre raison pour laquelle j'aime Bootstrap est qu'il a une communauté géante qui gère ce "massage" de nouveaux appareils au lieu de vous.
Je peux faire la mise en page partie de RWD. Mon problème spécifique est que je souhaite utiliser différents widgets d'interface utilisateur selon que le périphérique est mobile / tablette / bureau.
Peut-être que je devrais supprimer ma réponse si ce n'est pas utile? Si vous jouez avec BOOTSTRAP, vous pouvez clairement voir que les widgets rapprocheurs sont basés sur l'écran d'écriture (c'est-à-dire que le bouton Facebook comme le menu indique lorsqu'un écran atteint une certaine taille). Je souhaite que quelqu'un écrivait simplement un commentaire avant de descendre. Je suis heureux de supprimer la réponse.
Vous pouvez essayer cette bibliothèque PHP
https://code.google.com/p/php-mobile-detect /
ou celui-ci pour JavaScript
Je ne sais pas autant de choses sur la modernisation, mais je pense que la solution standard vérifie la largeur de l'écran pour la livraison de JS et CSS spéciaux pour des périphériques plus petits.
@Joshua, la largeur de l'écran peut être peu fiable. Si je voulais aussi développer cela pour avoir un mode de tablette, comment puis-je dire la différence entre une fenêtre étroite sur un bureau et une tablette? Il y a une requête médiatique qui peut détecter de manière fiable mobile / tablettes que je pourrais utiliser ceci: BRICSS.NET/POST/22198838298/... Bien que j'ai trouvé un peu lent, et cela ne fonctionnera pas sur IE9
Il y a tellement d'appareils mobiles là-bas et Même les plus populaires ont des largeurs d'écran très variables . La détection des événements tactiles n'est pas la bonne façon de gérer les choses. La pratique standard consiste à fournir différentes mises en page sensibles en fonction de la largeur de l'écran.
@Blazemonger, je sais comment faire la mise en page RWD. Je suis plus intéressé à appliquer différentes composantes / widgets de JQuery (ou Vanilla JavaScript) à une entrée si elle est sur mobile, tablette ou bureau. Un composant peut être mieux adapté à la saisie des dates sur mobile à l'aide d'une liste déroulante, un comprimé peut afficher un calendrier avec des cibles tactiles de Larget, un bureau pourrait interpréter une entrée de texte comme "demain" ou "mercredi prochain"
Si vous voulez vraiment faire la distinction entre les navigateurs, vous ne pouvez vérifier que le
navigator.useragent , bien que cela soit considéré comme si fiable. Google m'a donné ces liens: Stackoverflow.com/questions/12342092/... et Stackoverflow.com/questions/14661876/... . Peut-être que vous trouvez quelque chose d'utile. Il semble ne pas être trivial pour savoir si vous êtes actuellement sur une tablette, un smartphone ou un ordinateur de bureau.De plus, ce lien semble aussi être lisible aussi: x7.fi/2010/02/12/how-to-fit-your-website-for-the-apple-ipad . Il s'agit des questions de médias et des iPads.
Le problème est qu'il n'y a plus de moyen clair de distinction entre un smartphone, une tablette et un bureau. Les transformateurs de surface et asus de MS sont à la fois tablettes et bureau; Une note Kindle ou Galaxy est quelque part entre un smartphone et une tablette. Il n'y a pas de moyen significatif de distinguer les trois catégories. Vous devez décider de ce que vous essayez vraiment de distinguer et de mesurer cela à la place.
@Joshua, je veux quelque chose qui fonctionnera toujours avec des appareils / navigateurs qui sortent à l'avenir. La vérification de l'agent utilisateur ne fonctionnera que avec les appareils d'aujourd'hui. Je souhaite une solution qui fonctionne par la détection de fonctionnalités afin de fonctionner avec n'importe quel appareil qui prend en charge la fonctionnalité.
@Blazemonger Je suppose que depuis que les composants que j'utilise seront destinés à l'une des entrées tactiles ou du clavier, je veux une solution pouvant en détecter une ou deux. Donc, modernizr.Touch peut être la meilleure solution, bien que pour les périphériques qui ont une touche et un clavier pouvant entraîner une sélection d'interface non optimale. Je suppose que ce que je veux vraiment, c'est un moyen de détecter la présence d'un clavier matériel.
Stackoverflow.com/Questtions/13270659/... < / a>
SOO, si vous ne pouvez pas préciser ce que vous voulez vraiment, il est assez difficile de vous aider. Je pense que le lien de Blazemonger vous aidera le plus. Je m'en vais.
@Joshua je pensais avoir eu. Je veux pouvoir détecter: 1. Est-ce un périphérique tactile? 2. Cet appareil a-t-il un clavier matériel?
@Blazemonger, bonne trouvaille avec cette question. La pitié La meilleure réponse était "Faire un clavier virtuel en option"