Quelle est la différence entre un appareil mobile et un appareil de bureau?

Question

En utilisant Chrome Browser DevTools Je voulais ajouter un périphérique personnalisé dans le Emulated devices tab. Vous pouvez choisir plusieurs options telles que la largeur et la hauteur. Et aussi choisir entre:

• mobile
• mobile (pas toucher)
• Bureau
• Desktop (tactile)

Ainsi, la différence entre Mobile et bureau ne semble pas Soyez les événements tactiles.

---

est un écran de dispositif 1000 * 1000px taille mobile (pas toucher)

et une taille d'écran de dispositif 1000 * 1000px de bureau

les mêmes?

Ou un écran de dispositif 1000 * 1000px taille mobile

et un écran de dispositif 1000 * 1000px taille Desktop (tactile)

même?

---

Ma question est:

Quelle est la différence entre Desktop et Mobile à partir d'un point de vue technique?

S'il vous plaît expliquer la différence sur les plans conceptuel (je suis particulièrement intéressé par celui-ci) et dans les DevTools.

---

Modifier pour bounty:

Je suis venu à ce doute après avoir répondu à other question et de voir comment Google, Amazon et probablement quelques autres grandes entreprises font la différenciation sur la façon dont ils présentent leurs pages. Ce n'est pas sur la taille de l'écran mais sur le type d'appareil (si je suis correct). Donc, je me demande quels sont les aspects techniques qui les rendent discerner entre un bureau et un mobile, autre que "un mobile peut être déplacé".

Answer 1

J'ai regardé le code source. C'est un peu compliqué de suivre tout cela, mais je ne pouvais pas vraiment voir de grandes différences autres que le fait qu'il y ait un tableau capabilities, qui contient les options touch et mobile. Lorsque touch est activé, quatre événements tactiles sont émulés. À part cela, il semble y avoir une certaine logique de mise à l'échelle qui diffère entre les modes.

Vous ne savez pas si cela vous aide beaucoup. Si vous ou quelqu'un d'autre est intéressé à approfondir dans ce domaine, je voudrais vérifier inspector.js, avec la plupart de la logique trouvée dans les fonctions _calculateAndEmulate et _applyDeviceMetrics.

Answer 2

Une différence principale est l'en-tête de demande User-Agent que Chrome enverra.

Si vous choisissez Mobile, vous obtiendrez quelque chose comme ça,

Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) 
    Chrome/46.0.2490.76 Mobile Safari/537.36 

alors qu'avec Desktop, il ressemblera à ceci:

Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) 
    Chrome/54.0.2840.99 Safari/537.36 

(Specifics en fonction de votre système d'exploitation, la version Chrome etc Il va donc vous aider à tester/déboguer, si vous faites le reniflage User-Agent côté serveur. (À des fins telles que pour fournir un contenu différent Desktop vs Mobile, rediriger vers un sous-domaine mobile, ...)

Answer 3

Ciblage Desktop et mobile

La principale différence entre un appareil mobile et un appareil de bureau, au moins en ce qui concerne le paramétrage mobile/de bureau dans les navigateurs Web, est la taille physique de l'écran. Cela ne doit pas être confondu avec la résolution de l'écran. Lorsque vous ciblez un design sur un ordinateur de bureau, l'interface doit inclure un contenu plus étendu sur l'écran à la fois, la version mobile ayant la majeure partie du contenu caché dans les icônes pour être étendue au toucher. La version mobile sera optimisée pour l'espace en comparaison.

En fait, lorsqu'une tablette a une taille d'écran supérieure à la taille standard, par ex. Les tablettes avec claviers détachables disponibles ces jours-ci, les versions mobiles du site peuvent sembler trop optimisées pour l'espace, ce qui explique pourquoi les navigateurs permettent aux utilisateurs de tablettes d'opter pour l'affichage de sites en mode bureautique. La résolution d'un appareil mobile peut être plus élevée que sur un ordinateur de bureau, mais le fait que l'écran est (au moins supposé être) beaucoup plus grand sur une machine de bureau, les gens qui utilisent des machines de bureau sont à l'aise avec contenu sur l'écran à la fois que les gens qui regardent sur les appareils mobiles.

comparaison considération Premier

Desktop:

• Plus grand, plusieurs écrans qui accueillent plus de contenu à l'écran à la fois.
• Plus typage - L'entrée commune est le clavier.
• Hover et cliquez sur les liens - L'entrée commune est la souris.
• Situé sur le bureau.
• Usage intensif.
• Matériel plus performant (la mémoire et la puissance de traitement sont moins chères).
• Performances de puissance.

Mobile:

• Plus petit, écran unique où l'optimisation de l'espace est primordial.Moins de frappe - Le type d'entrée commun est l'écran tactile.
• Touchez et faites un geste.
• Situé dans la poche.
• Utilisation occasionnelle.
• Matériel moins performant. C'est à dire. La mémoire et le traitement de course petits et frais signifient moins pour votre argent.
• Efficacité énergétique.