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

Question

使用Chrome Browser DevTools我想在Emulated devices tab中添加自定义设备。 您可以选择多个选项，例如宽度和高度。并且还可以选择：

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

因此，移动和桌面之间的区别似乎不是触摸事件。

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

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

同样的？

或者1000 * 1000px屏幕尺寸Mobile

的设备

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

同样的？

所以我的问题是：

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

请解释差异概念上（我对此特别感兴趣）和DevTools 。

编辑赏金：

我在回答other question并了解谷歌，亚马逊以及其他一些大公司如何在他们展示网页的方式上有所区别后，才对此产生怀疑。它不是屏幕大小，而是设备类型（如果我是正确的）。所以我想知道哪些技术方面可以让他们在台式机和移动设备之间识别，而不是“移动设备可以移动”。

Answer 1

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

不确定这是否有多大帮助。如果您或其他任何人有兴趣深入了解此问题，请查看touch，其中包含inspector.js和_calculateAndEmulate函数中的大多数逻辑。

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嗅探，它将帮助您进行测试/调试。 （出于为桌面与移动设备提供不同内容，重定向到移动子网域等目的，...）