Les navigateurs mobiles sont un type de logiciel pour consulter des sites Web sur des appareils mobiles. Certains navigateurs mobiles sont des doublons de navigateurs de bureau réguliers qui prennent en compte les particularités des téléphones mobiles. D’autres sont conçus spécifiquement pour le format de téléphone mobile.

La tâche principale des navigateurs mobiles est un travail rapide et de haute qualité, une facilité d’utilisation et une interface intuitive. Plusieurs navigateurs mobiles sont disponibles. En général, les navigateurs mobiles sont regroupés en quatre catégories de navigateur, selon la plate-forme de l’appareil mobile :

  • Android
  • Ios
  • Windows Phone
  • générique.

Surveiller les sites Web dans les navigateurs mobiles avec Desktop-Monitor

La part de l’Internet mobile ne fera qu’augmenter avec le temps et l’utilisation des appareils mobiles deviendra encore plus courante. Ainsi, il est évident que les sites Web doivent être desservis pour les appareils mobiles avec le même niveau de performance que pour les navigateurs de bureau. Lors de la création d’un site Web ou d’un blog, il est nécessaire de sélectionner une conception web réactive afin que le contenu de la ressource semble bon sur l’écran de n’importe quel appareil. par la suite, nous ne pouvons que mentionner la nécessité de la surveillance des performances web des sites Web pour la compatibilité avec différents navigateurs mobiles.

Alors que la vague de trafic Web mondial accessible par les appareils mobiles est en plein essor, Dotcom-Monitor a ajouté une prise en charge de l’émulation par navigateur mobile pour les produits mobiles à la plate-forme BrowserView.

Avec Dotcom-Monitor, le processus de test de votre site web dans différents navigateurs mobiles n’est plus un problème. Vous n’avez pas besoin d’acheter beaucoup d’appareils avec différentes tailles d’écran pour tester une interface mobile. Ce que vous devez faire est simplement de créer un périphérique Dotcom-Monitor BrowserView, sélectionnez un type d’appareil de navigateur sur qui vous devez tester votre site Web. Tout en surveillant le système émulera l’appareil que vous avez choisi de la même manière que les outils intégrés du navigateur de bureau. Le chargement des pages se fait en mode paysage dans la fenêtre du navigateur.

Nous utilisons le moteur Chromium pour émuler le comportement des navigateurs mobiles. Puisque Chromium est un fork de WebKit, il y a beaucoup de points communs entre Chromium et Safari WebKit. Pour obtenir une précision d’émulation de haut niveau pour Safari, nous utilisons également plusieurs paramètres dans le moteur Chromium. Cependant, notez que Safari et Chromium sont des navigateurs différents et qu’il peut y avoir une certaine divergence dans l’émulation et le comportement réel du navigateur.

Vous pouvez configurer la fréquence de surveillance, les captures d’écran et les options d’enregistrement vidéo, spécifier les emplacements de surveillance pour surveiller le fonctionnement de votre site Web pour les utilisateurs du monde entier. De plus, en cas d’erreurs détectées lors de la surveillance, le système générera des alertes et enverra les notifications d’alerte aux adresses fournies.

La création d’un périphérique BrowserView reste essentiellement la même pour la configuration mobile. Il suffit de sélectionner le modèle mobile nécessaire à partir du menu Type de navigateur lors de la configuration de l’appareil.

Parmi les appareils qui peuvent être imités avec la plate-forme Dotcom-Monitor BrowserView sont les suivants:

Modèle d’appareil

Agent utilisateur

iPhone 4 Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3_2 comme Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, comme Gecko) Version/5.0.2 Mobile/8H7 Safari/6533.18.5
iPhone 5 Mozilla/5.0 (iPhone; CPU iPhone OS 7_0 comme Mac OS X; en-us) AppleWebKit/537.51.1 (KHTML, comme Gecko) Version/7.0 Mobile/11A465 Safari/9537.53
iPhone 6 Mozilla/5.0 (iPhone; CPU iPhone OS 8_0 comme Mac OS X) AppleWebKit/600.1.3 (KHTML, comme Gecko) Version/8.0 Mobile/12A4345d Safari/600.1.4
iPhone 6 plus Mozilla/5.0 (iPhone; CPU iPhone OS 8_0 comme Mac OS X) AppleWebKit/600.1.3 (KHTML, comme Gecko) Version/8.0 Mobile/12A4345d Safari/600.1.4
iPod Touch 4 Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3_2 comme Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, comme Gecko) Version/5.0.2 Mobile/8H7 Safari/6533.18.5
iPod Touch 5 Mozilla/5.0 (iPhone; CPU iPhone OS 7_0 comme Mac OS X; en-us) AppleWebKit/537.51.1 (KHTML, comme Gecko) Version/7.0 Mobile/11A465 Safari/9537.53
iPad (iPad) Mozilla/5.0 (iPad; CPU OS 4_3_5 comme Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, comme Gecko) Version/5.0.2 Mobile/8L1 Safari/6533.18.5
iPad 2 Mozilla/5.0 (iPad; CPU OS 5_1 comme Mac OS X; en-us) AppleWebKit/534.46 (KHTML, comme Gecko) Version/5.1 Mobile/9B176 Safari/7534.48.3
iPad 3 (Le nouvel iPad) Mozilla/5.0 (iPad; CPU OS 7_0 comme Mac OS X) AppleWebKit/537.51.1 (KHTML, comme Gecko) Version/7.0 Mobile/11A465 Safari/9537.53
iPad 4 (iPad de 4ème génération) Mozilla/5.0 (iPad; CPU OS 7_0 comme Mac OS X) AppleWebKit/537.51.1 (KHTML, comme Gecko) Version/7.0 Mobile/11A465 Safari/9537.53
iPad Mini (iPad Mini) Mozilla/5.0 (iPad; CPU OS 6_0 comme Mac OS X) AppleWebKit/536.26 (KHTML, comme Gecko) Version/6.0 Mobile/10A406 Safari/8536.25
Nexus 4 de Google Mozilla/5.0 (Linux; Android 4.2.1; en-nous; Nexus 4 Build/JOP40D) AppleWebKit/535.19 (KHTML, comme Gecko) Chrome/18.0.1025.166 Mobile Safari/535.19
Nexus 5 de Google Mozilla/5.0 (Linux; Android 4.2.1; en-nous; Nexus 5 Build/JOP40D) AppleWebKit/535.19 (KHTML, comme Gecko) Chrome/18.0.1025.166 Mobile Safari/535.19
Nexus 10 de Google Mozilla/5.0 (Linux; Android 4.3; Nexus 10 Build/JSS15Q) AppleWebKit/537.36 (KHTML, comme Gecko) Chrome/29.0.1547.72 Safari/537.36
Nexus 7 de Google Mozilla/5.0 (Linux; Android 4.3; Nexus 7 Build/JSS15Q) AppleWebKit/537.36 (KHTML, comme Gecko) Chrome/29.0.1547.72 Safari/537.36
Nexus Google 7 2 Mozilla/5.0 (Linux; Android 4.3; Nexus 7 Build/JSS15Q) AppleWebKit/537.36 (KHTML, comme Gecko) Chrome/29.0.1547.72 Safari/537.36
Samsung Galaxy Note Mozilla/5.0 (Linux; U; Android 2.3; en-nous; SAMSUNG-SGH-I717 Build/GINGERBREAD) AppleWebKit/533.1 (KHTML, comme Gecko) Version/4.0 Mobile Safari/533.1
Samsung Galaxy Note 2 Samsung Galaxy Note 2 Samsung Galaxy Note 2 Samsung Galaxy Mozilla/5.0 (Linux; U; Android 4.1; en-nous; GT-N7100 Build/JRO03C) AppleWebKit/534.30 (KHTML, comme Gecko) Version/4.0 Mobile Safari/534.30
Samsung Galaxy Note 3 Samsung Galaxy Note 3 Samsung Galaxy Note 3 Samsung Galaxy Mozilla/5.0 (Linux; U; Android 4.3; en-nous; SM-N900T Build/JSS15J) AppleWebKit/534.30 (KHTML, comme Gecko) Version/4.0 Mobile Safari/534.30
Samsung Galaxy S Mozilla/5.0 (Linux; U; Android 2.1; en-nous; GT-I9000 Build/ECLAIR) AppleWebKit/525.10+ (KHTML, comme Gecko) Version/3.0.4 Mobile Safari/523.12.2
Samsung Galaxy S3 Mozilla/5.0 (Linux; U; Android 4.0; en-nous; GT-I9300 Build/IMM76D) AppleWebKit/534.30 (KHTML, comme Gecko) Version/4.0 Mobile Safari/534.30
Samsung Galaxy S4 Mozilla/5.0 (Linux; Android 4.2.2; GT-I9505 Build/JDQ39) AppleWebKit/537.36 (KHTML, comme Gecko) Chrome/31.0.1650.59 Mobile Safari/537.36
Onglet Samsung Galaxy Mozilla/5.0 (Linux; U; Android 2.2; en-nous; SCH-I800 Build/FROYO) AppleWebKit/533.1 (KHTML, comme Gecko) Version/4.0 Mobile Safari/533.1
Samsung Galaxy Tab 10 Mozilla/5.0 (Linux; U; Android 2.2; en-nous; SCH-I800 Build/FROYO) AppleWebKit/533.1 (KHTML, comme Gecko) Version/4.0 Mobile Safari/533.1
HTC Evo Mozilla/5.0 (Linux; U; Android 2.2; en-nous; Sprint APA9292KT Build/FRF91) AppleWebKit/533.1 (KHTML, comme Gecko) Version/4.0 Mobile Safari/533.1
HTC Un X Mozilla/5.0 (Linux; Android 4.0.3; HTC One X Build/IML74K) AppleWebKit/535.19 (KHTML, comme Gecko) Chrome/18.0.1025.133 Mobile Safari/535.19
HTC Sensation Mozilla/5.0 (Linux; U; Android 4.0.3; en-nous; HTC Sensation Build/IML74K) AppleWebKit/534.30 (KHTML, comme Gecko) Version/4.0 Mobile Safari/534.30
Motorola Défi Mozilla/5.0 (Linux; U; Android 2.0; en-nous; Milestone Build/ SHOLS_U2_01.03.1) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17
Motorola Droid 3 Mozilla/5.0 (Linux; U; Android 2.2; en-nous; Droid Build/FRG22D) AppleWebKit/533.1 (KHTML, comme Gecko) Version/4.0 Mobile Safari/533.1
Motorola Xoom Mozilla/5.0 (Linux; U; Android 3.0; en-nous; Xoom Build/HRI39) AppleWebKit/525.10 (KHTML, comme Gecko) Version/3.0.4 Mobile Safari/523.12.2
Sony Xperia S Mozilla/5.0 (Linux; U; Android 4.0; en-nous; LT28at Build/6.1.C.1.111) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30
Sony Xperia Z Mozilla/5.0 (Linux; U; Android 4.2; en-nous; SonyC6903 Build/14.1.G.1.518) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30
Amazon Kindle Incendie Mozilla/5.0 (Linux; U; Android 2.3.4; en-nous; Kindle Fire Build/GINGERBREAD) AppleWebKit/533.1 (KHTML, comme Gecko) Version/4.0 Mobile Safari/533.1
Amazon Kindle Fire HDX 7 Mozilla/5.0 (Linux; U; en-nous; KFTHWI Build/JDQ39) AppleWebKit/535.19 (KHTML, comme Gecko) Silk/3.13 Safari/535.19 Silk-Accelerated=true
Amazon Kindle Fire HDX 8 Mozilla/5.0 (Linux; U; en-nous; KFAPWI Build/JDQ39) AppleWebKit/535.19 (KHTML, comme Gecko) Silk/3.13 Safari/535.19 Silk-Accelerated=true
Nokia Lumia 8XX Nokia Lumia 8XX Nokia Lumia 8XX Nokia Lu Mozilla/5.0 (compatible; MSIE 10,0; Windows Phone 8.0; Trident/6,0; IEMobile/10,0; ARM; Toucher; NOKIA; Lumia 820)
BlackBerry Z10 Mozilla/5.0 (BB10; Touch) AppleWebKit/537.10+ (KHTML, comme Gecko) Version/10.0.9.2372 Mobile Safari/537.10+
BlackBerry Z30 Mozilla/5.0 (BB10; Touch) AppleWebKit/537.10+ (KHTML, comme Gecko) Version/10.0.9.2372 Mobile Safari/537.10+
BlackBerry PlayBook Mozilla/5.0 (PlayBook; U; RIM Tablet OS 2.1.0; en-US) AppleWebKit/536.2+ (KHTML comme Gecko) Version/7.2.1.0 Safari/536.2+
  • Comprendre l'émulation des navigateurs mobiles

    Ce que la chaîne d’agent utilisateur signifie réellement

    L’agent utilisateur est une chaîne qui est transmise par un navigateur de bureau ou mobile ainsi qu’une demande HTTP(S) pour n’importe quelle page Web sur Internet. La chaîne contient des informations spécifiques sur le logiciel et le matériel de l’appareil qui fait la demande, la technologie spécifique utilisée pour accéder à un site Web, une page Web ou tout autre contenu en ligne. La chaîne d’agents utilisateur est unique à chaque utilisateur web. Ces informations incluent généralement des détails sur le nom du navigateur, le moteur de rendu Web, la plate-forme native (par exemple pour les navigateurs mobiles, iOS, Android, Amazon KFTHWI, Windows Phone 8, BB10, RIM Tablet OS, etc.), et l’appareil sur laquelle le navigateur fonctionne.

    En utilisant la chaîne d’agents utilisateur, vous pouvez déterminer beaucoup de paramètres, par exemple, en plus du nom du système d’exploitation, de sa version et du type de processeur. Vous pouvez également identifier l’appareil exécutant le navigateur – il peut s’agir d’une tablette, d’un PC, d’un iPad, d’un iPhone ou d’un autre appareil mobile. En outre, la chaîne d’agents utilisateur peut contenir des informations sur les fonctionnalités qu’un navigateur Web prend en charge (telles que JavaScript, Cookie, Java Applet, ActiveX, etc.).

    Vous pouvez consulter la chaîne user agent qui indique votre navigateur dans le navigateur Chrome en entrant :

    about:

    Une fois qu’un utilisateur a entré une URL d’un site Web dans un navigateur, le navigateur envoie sa chaîne d’agents utilisateur sur le site Web où il tente de se connecter. Une fois que l’agent utilisateur est identifié sur un serveur Web, le serveur renvoie le contenu approprié (fichiers, JavaScript, fichiers multimédias) qui correspond aux paramètres du navigateur. De cette façon, différentes versions de la même page Web basées sur l’en-tête de l’agent utilisateur peuvent être fournies au navigateur.

    Cependant, le principal défi au sujet de la compréhension de la chaîne d’agent utilisateur est que la majorité des navigateurs indiquent non seulement des informations réelles sur ce qu’ils sont construire, mais aussi ajouter ce qu’ils sont compatibles avec la chaîne de l’agent utilisateur. Par exemple, presque tous les navigateurs modernes signale Mozila/5.0 dans le cadre de sa chaîne d’agents utilisateur.

    Comment lire la chaîne user agent

    Comme il n’y a pas de format standard pour une chaîne d’agents utilisateur, il peut être difficile de le lire. Cependant, vous pouvez trouver beaucoup de lignes directrices sur la façon d’analyser et d’analyser le contenu des chaînes d’agents utilisateurs sur Internet. En outre, vous pouvez utiliser des outils analytiques en ligne (tels que whatismybrowser.com) pour relever ce défi.

    Dans cet article, nous ne couvrirons que les bases de la terminologie des cordes de l’agent utilisateur. Analysons la chaîne de l’agent utilisateur avec le contenu suivant :

    Mozilla / 5.0 (iPhone; CPU iPhone OS 8_0 like Mac OS X) AppleWebKit / 600.1.3 (KHTML, like Gecko) Version / 8.0 Mobile / 12A4345d Safari / 600.1.4

    La chaîne d’exemple contient quelques jetons couramment utilisés. Examinons de plus près ce que chacun des noms signifie réellement :

    • Mozilla/ 5.0, comme cela a été mentionné ci-dessus, est utilisé par les navigateurs modernes pour faire savoir aux serveurs Web qu’un navigateur est compatible Mozilla. Mozilla est un nom de code utilisé par Netscape et peuplé par d’autres navigateurs dans leurs chaînes d’agents utilisateur à servir avec le même contenu que Netscape.
    • AppleWebKit est un identificateur de moteur de rendu Web utilisé sur les appareils Apple et pris en charge par d’autres types d’appareils tels que BlackBerry.
    • KHTML est un moteur utilisé par Safari et Chrome.
    • Gecko est le moteur utilisé dans les dernières versions de Firefox. Le jeton «comme Gecko» est utilisé pour être compatible avec les sites Web qui servent leur contenu aux navigateurs basés sur Geko.
    • Safari est le jeton qui indique un nom de navigateur réel.

    Comment émuler un appareil mobile dans un navigateur de bureau (Google Chrome)

    Pour afficher et tester une version mobile de votre site Web, vous pouvez utiliser des outils intégrés qui sont fournis par tous les navigateurs Web modernes. À titre d’exemple, nous vous ferons passer par l’émulation du mode navigateur mobile dans Google Chrome.

    Tout d’abord, démarrer Chrome. Dans Google Chrome, ouvrez un site Web mobile que vous devez tester. Cliquez ensuite sur le bouton Personnaliser et gérer Google Chrome (trois points verticaux dans le coin supérieur droit de la fenêtre du navigateur). Dans le menu, sélectionnez Plus d’outils < de développeur d’outils. Ou vous pouvez utiliser CTRL + Shift + I pour Windows, Unix et Cmd+Opt+I pour Mac OS.

    Cliquez ensuite sur l’icône barre d’outils de l’appareil Toggle. L’émulateur du navigateur sera démarré et la simulation de l’appareil sera activée. Par conséquent, la vue mobile de la page sera chargée.

    Par défaut, la barre d’outils de l’appareil utilise un mode réactif pour la page chargée. Vous pouvez sélectionner l’appareil mobile que vous souhaitez émuler pour votre test : Samsung Galaxy S5, Pixel 2, Pixel 2 XL, iPhone (de la version 5 à l’iPhone X), iPad et iPad Pro. La page de l’appareil mobile se recharge comme si vous utilisiez le smartphone ou la tablette que vous avez sélectionné dans la liste.

    Lorsque vous avez terminé, il suffit de fermer les outils de développeur Google Chrome pour revenir à la vue de bureau standard.