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

Question

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

• 移动
• 手机(无触摸)
• 桌面
• 桌面(触摸)

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

---

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

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

相同？

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

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

相同？

---

所以我的问题是:

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

请从概念上解释(我对这个特别感兴趣)和DevTools中的区别.

---

编辑赏金:

在回答了其他问题并了解谷歌,亚马逊以及其他一些大公司如何区分他们展示网页的方式之后,我才开始怀疑.它不是屏幕大小,而是设备类型(如果我是正确的).所以我想知道除了"移动设备可以移动"之外,在桌面设备和移动设备之间识别的技术方面是什么.

Answer 1

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

不确定这是否有很大帮助.如果你或其他人有兴趣看深入这一点,我想看看inspector.js,大部分的逻辑在发现_calculateAndEmulate和_applyDeviceMetrics功能.

Answer 2

一个主要区别是 Chrome 将发送的 User-Agent 请求标头。

\n\n

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

\n\n

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

\n\n

而对于Desktop，它看起来像这样：

\n\n

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

\n\n

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

\n\n

因此，如果您正在进行服务器端用户代理嗅探，它将帮助您进行测试/调试。（出于诸如为桌面与移动提供不同内容、重定向到移动子域 \xe2\x80\xa6 等目的）

\n

Answer 3

定位台式机和移动设备

至少就网络浏览器中的移动/桌面设置而言，移动设备和台式设备之间的主要区别在于屏幕的物理尺寸。请勿将其与屏幕分辨率混淆。

将设计目标放在桌面时，该界面有望一次在屏幕上包含更多扩展内容，而移动版本的大部分内容都隐藏在图标中，可以一触即扩展。相比之下，移动版将进行空间优化。

实际上，当平板电脑的屏幕尺寸大于标准屏幕尺寸时（例如，如今具有可拆卸键盘的平板电脑可用），该网站的移动版本可能会针对空间进行过度优化，这就是浏览器允许平板电脑用户选择显示网站的原因在桌面模式下。

移动设备的分辨率可能比台式机要高，但是（至少假定）台式机的屏幕是如此之大，使用台式机的人对屏幕上更多的内容感到满意。一次，而不是在移动设备上观看的人。

主要考虑因素比较

桌面：

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

移动：

• 较小的单屏幕，其中空间优化至关重要。
• 更少的输入-常见的输入类型是触摸屏。
• 触摸和手势。
• 位于口袋中。
• 随便使用。
• 功能较弱的硬件。即小巧而酷炫的运行内存和处理方式意味着您无需花很多钱。
• 电源效率。