检测是不是使用移动设备（iOS/Android 手机/平板电脑）中的浏览器

Posted 2023-03-06

【中文标题】检测是不是使用移动设备（iOS/Android 手机/平板电脑）中的浏览器

【英文标题】：Detect if a browser in a mobile device (iOS/Android phone/tablet) is used检测是否使用移动设备（iOS/Android 手机/平板电脑）中的浏览器

【发布时间】：2013-02-03 05:23:41

【问题描述】：

有没有办法检测是否使用了手持浏览器（ios/android 手机/平板电脑）？

我尝试这样做的目的是让手持设备上的浏览器中的元素宽度减半，但这并没有什么不同。

width: 600px;
@media handheld  width: 300px; 

可以做到吗？如果可以怎么做？

编辑：来自我使用的 jmaes 回答中的参考页面

@media only screen and (max-device-width: 480px).

【问题讨论】：

目标是检测任何移动设备，还是需要能够区分手持设备和平板电脑？

目标是检测任何移动设备。

检测是否触摸屏：***.com/questions/11387805/touchscreen-media-queries，方向变化：***.com/questions/13803838/…

【参考方案1】：

更新（2016 年 6 月）：我现在尝试在每个分辨率上都支持触摸和鼠标输入，因为设备环境正在慢慢模糊事物是和非触摸设备之间的界限。 iPad Pro 仅支持触控，分辨率相当于 13 英寸笔记本电脑。Windows 笔记本电脑现在经常配备触摸屏。

其他类似的 SO 答案（请参阅此问题的其他答案）可能有不同的方法来尝试找出用户正在使用哪种设备，但它们都不是万无一失的。如果您绝对需要尝试确定设备，我鼓励您检查这些答案。

---

例如，iPhone 会忽略 handheld 查询 (Source)。如果其他智能手机也出于类似原因这样做，我也不会感到惊讶。

目前我用来检测移动设备的最佳方法是知道它的宽度并使用corresponding media query 来捕捉它。那里的链接列出了一些流行的链接。我敢肯定，快速的 Google 搜索会为您提供您可能需要的任何其他内容。

如需更多 iPhone 专用（如 Retina 显示屏），请查看我发布的第一个链接。

【讨论】：

不，由于今天的设备具有与桌面显示器相同甚至更高的分辨率，因此屏幕分辨率并不是最好的方法。

@EASI 尽管今天的设备屏幕可能比桌面有更多的像素，但它们通过“像素比例”降低到“CSS 大小”，即在 CSS 和媒体查询中报告和使用的大小是 @987654327 @ 比物理像素大小小几倍（n 为 1、2、3……）例如见mydevice.io/devices当然媒体查询使用屏幕大小来检测设备类型很麻烦，但不幸的是周围没有那么多其他选择......

根据developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/…，您提供的列表正在使用不再保证工作的device-width和device-height媒体功能

@CalebJay 没错，但首先，非常可靠的 CSS 技巧网站仍然显示 webkit 方法在许多设备中有效，包括 Iphone-10 和许多新的 Galaxy 手机！ (css-tricks.com/snippets/css/media-queries-for-standard-devices)。但更重要的是，所谓的“更标准”“像素比例”似乎不适用于我尝试过的 iphone。所以看起来如果（像我一样）你真的需要为手机壳做一些显示补偿，webkit 方法是天赐之物！那是，当然，直到它不是:-(

【参考方案2】：

我是这样做的：

@media (pointer:none), (pointer:coarse) 

基于https://***.com/a/42835826/1365066

【讨论】：

并不总是有效。我使用的是联想 Yoga 2 Pro（触摸屏），外接全高清显示器，Win10 1803。在 Firefox 62 上：工作（div 为绿色），在 Chrome 69 上：它不起作用（div 为红色）所以再次尝试使用此解决方法获得幸运一击：/

聪明的解决方案！

这个规则很难调试。如果您打算将其与桌面浏览器和移动视图一起使用，则在元素上选择指针将取消触发为移动视图建议的任何样式。

【参考方案3】：

不要检测移动设备，而是使用固定设备。

现在（2016 年）有一种方法可以检测每英寸/厘米/像素的点数，这似乎适用于大多数现代浏览器（请参阅 http://caniuse.com/#feat=css-media-resolution）。我需要一种方法来区分相对较小的屏幕、方向无关紧要和固定的计算机显示器。

由于很多移动浏览器不支持这一点，可以为所有情况编写通用 css 代码，并将此异常用于大屏幕：

@media (max-resolution: 1dppx) 
    /* ... */

Windows XP 和 7 都具有每像素 1 个点（或 96dpi）的默认设置。我不了解其他操作系统，但这非常适合我的需求。

编辑：dppx 似乎在 Internet Explorer 中不起作用。请改用 (96)dpi。

【讨论】：

如果用户是例如在 windows 10 下使用 4k 显示器并增加了 UI 大小。

我不会相信这个

【参考方案4】：

检测移动设备

相关回答：https://***.com/a/13805337/1306809

没有一种方法是真正万无一失的。最好的办法是根据需要混合搭配各种技巧，以增加成功检测更广泛手持设备的机会。请参阅上面的链接了解一些不同的选项。

【讨论】：

哈哈，我们无法检测到用户是否有触摸屏，这真是太奇怪了！

@Kokodoko 是的，这看起来确实很奇怪。更有趣的是，一些新的 Windows 笔记本电脑是带有触摸屏的传统电脑。其他设备具有高分辨率并且只有触摸屏，例如较大的 iPad Pro。我想说今天的最佳做法是支持每个决议的所有内容。

【参考方案5】：

我认为检测移动设备的一种更可靠的方法是查看 navigator.userAgent 字符串。例如，在我的 iPhone 上，用户代理字符串是：

Mozilla/5.0（iPhone；CPU iPhone OS 10_3_2，如 Mac OS X）AppleWebKit/603.2.4（Khtml，如 Gecko）版本/10.0 Mobile/14F89 Safari/602.1

请注意，此字符串包含两个说明关键字：iPhone 和 Mobile。其他我没有的设备的用户代理字符串提供于：

https://deviceatlas.com/blog/list-of-user-agent-strings

使用此字符串，我使用以下代码将我网站上的 javascript 布尔变量 bMobile 设置为 true 或 false：

var bMobile =   // will be true if running on a mobile device
  navigator.userAgent.indexOf( "Mobile" ) !== -1 || 
  navigator.userAgent.indexOf( "iPhone" ) !== -1 || 
  navigator.userAgent.indexOf( "Android" ) !== -1 || 
  navigator.userAgent.indexOf( "Windows Phone" ) !== -1 ;

【讨论】：

这可以正常工作...如果您只关心 iPhone、Android 和 Windows Phone。但是还有其他完整的设备类，例如不要忘记 Blackberry 和 Opera Mini 用户。仅 Opera Mini 就拥有约 3.5 亿用户。此外，较老的功能手机用户也不会匹配这些模式，而这些设备正是绝对需要移动特定体验的设备。丑陋的现实是，这个领域已经变得足够复杂，以至于简单的解决方案不再有效。

是的，你当然是对的，@RonanCremin，但你可以添加任何其他你喜欢的用户代理字符串关键字。 （而且我意识到使用正则表达式可以使我的代码更高效。）我也同意这种情况通常比它们最初看起来更复杂。

【参考方案6】：

许多移动设备的分辨率非常高，以至于很难将它们与更大的屏幕区分开来。有两种方法可以解决这个问题：

使用以下 HTML 代码缩放像素（将较小的像素分组为单位像素的大小 - 96dpi，因此px 单位将在所有屏幕上具有相同的物理大小）。请注意，这将影响您网站中几乎所有内容的规模，但这通常是使网站适合移动设备的方式。

<meta name="viewport" content="width=device-width, initial-scale=1">

或者，在@media 查询中使用cm 而不是px 单位测量屏幕宽度可以告诉您是否正在处理物理上较小的屏幕，而不管分辨率如何。

【参考方案7】：

我知道这是一个旧线程，但我认为这可能会对某人有所帮助：

移动设备的高度大于宽度，相反，计算机的宽度大于高度。例如：

@media all and (max-width: 320px) and (min-height: 320px)

所以我猜每个宽度都必须这样做。

【讨论】：

但在横向模式下不适用于移动设备。

另外，浏览器窗口可以调整大小。

【参考方案8】：

简单！把这个扔到你的 CSS 文件的底部，这部分 CSS 将在手机中被修改：-

/* ON A PHONE */
@media only screen and (max-width: 600px)  /* CSS HERE ONLY ON PHONE */ 

瞧！

【讨论】：

现代手机可以有分辨率，例如。 1440 x 3200 (Galaxy S20)、1284 x 2778 (iPhone 12) 等。但由于纵向和较小的物理尺寸，您可能希望拥有适合移动设备的布局，而不是常规的桌面布局。跨度>

@JuhaUntinen 现代手机可以有分辨率，例如。 1440 x 3200 -- 仅物理像素。在 css 媒体查询中使用的逻辑像素方面，通常的电话位于400px X 750px 附近。这里的downvotes似乎表明问题想要检测UA是移动浏览器还是桌面浏览器 - 有时需要修复导致视口高度变化的url栏。