移动设备和桌面设备有什么区别？

Question

使用Chrome浏览器DevTools我想在“ 仿真设备”选项卡中添加自定义设备。 您可以选择多个选项，例如宽度和高度。 并选择：

• 移动
• 手机（无触摸）
• 桌面
• 桌面（触摸）

所以Mobile和Desktop之间的区别似乎不是触摸事件 。

---

屏幕尺寸为1000 * 1000px的移动设备（无触摸）

和一个1000 * 1000px屏幕尺寸的桌面设备

相同？

或移动设备1000 * 1000px屏幕尺寸的设备

和一个1000 * 1000px屏幕尺寸的设备桌面（触摸）

相同？

---

所以我的问题是：

从技术角度来看，桌面和移动有什么区别？

请从概念上解释（我对这个特别感兴趣） 和DevTools中的区别 。

---

编辑赏金 ：

在回答了其他问题并了解谷歌，亚马逊以及其他一些大公司如何区分他们展示网页的方式之后，我才开始怀疑。 它不是屏幕大小，而是设备类型（如果我是正确的）。 因此，我想知道除了“移动设备可以移动”之外， 哪些技术方面可以让他们在桌面和移动设备之间进行识别 。

Answer 1

我看了一下源代码。 完全遵循它有点棘手，但除了包含touch和mobile选项的capabilities数组这一事实外，我无法看到任何重大差异。 当touch被启用，但是也有一些模拟四个触摸事件。 除此之外，似乎存在一些在模式之间不同的缩放逻辑。

不确定这是否有很大帮助。 如果您或其他任何人有兴趣深入研究这个问题，我会查看inspector.js ，其中包含_calculateAndEmulate和_applyDeviceMetrics函数中的大部分逻辑。

Answer 2

针对桌面和移动设备

移动设备和桌面设备之间的关键差异，至少就Web浏览器中的移动/桌面设置而言，是屏幕的物理尺寸。 这不应与屏幕的分辨率混淆。

当在桌面上定位设计时，界面预期一次在屏幕上包括更多扩展内容，其中移动版本具有隐藏在图标内的大部分内容以便在触摸时扩展。 相比之下，移动版本将进行空间优化。

事实上，当平板电脑的屏幕尺寸大于标准尺寸时，例如目前可提供可拆卸键盘的平板电脑，该网站的移动版本可能看起来过于优化空间，这就是浏览器允许平板电脑用户选择显示网站的原因在桌面模式下。

移动设备的分辨率可能高于桌面设备，但是在桌面计算机上屏幕（至少假设）更大的事实，使用台式机的人们对屏幕上的更多扩展内容感到满意曾经比在移动设备上观看的人多一次。

主要考虑比较

桌面：

• 更大，更多的屏幕，可以同时在屏幕上容纳更多内容。
• 更多输入 - 常见输入是键盘。
• 悬停并单击链接 - 常用输入是鼠标。
• 位于桌子上。
• 大量使用。
• 功能更强大的硬件（内存和处理能力更便宜）。
• 动力性能。

移动：

• 更小的单屏幕，空间优化至关重要。
• 减少输入 - 常见的输入类型是触摸屏。
• 触摸和手势。
• 位于口袋里。
• 随意使用。
• 功能较低的硬件。 即小而酷的运行内存和处理意味着你的钱少了。
• 电源效率。

Answer 3

一个主要区别是Chrome将发送的用户代理请求标头。

如果你选择Mobile ，你会得到这样的东西，

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

而对于Desktop ，它将如下所示：

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

（具体取决于您的操作系统，Chrome版本等。当然。）

因此，如果您正在进行服务器端User-Agent嗅探，它将帮助您进行测试/调试。 （出于诸如为桌面与移动设备提供不同内容，重定向到移动子域，...等目的）