检测移动设备(iOS/Android 手机/平板电脑)中的浏览器是否被使用

小开

最佳答案

更新(2016年6月) : 我现在尝试在每个分辨率上支持触摸和鼠标输入，因为设备界面正在慢慢模糊什么是触摸设备、什么不是触摸设备之间的界限。IPad Pro 只有13英寸笔记本电脑的分辨率。Windows 笔记本电脑现在经常配备触摸屏。

其他类似的 SO 答案(参见关于这个问题的其他答案)可能有不同的方法来尝试弄清楚用户使用的是什么类型的设备，但没有一个是万无一失的。如果你确实需要确定设备的话，我鼓励你检查一下这些答案。

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

目前我用来检测移动设备的最佳方法是知道它的宽度并使用相应的媒体查询来捕捉它。那里的链接列出了一些流行的。我敢肯定，一个快速的谷歌搜索就会给你带来你可能需要的任何其他东西。

想要了解更多 iPhone 特有的功能(比如 Retina display) ，请查看我发布的第一个链接。

小开

检测移动设备

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

小开

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

如今(2016年)有一种方法可以检测出每英寸/厘米/像素的点数，这种方法似乎在大多数现代浏览器中都可以使用(参见 http://caniuse.com/#feat=css-media-resolution)。我需要一种方法来区分一个相对较小的屏幕，方向并不重要，和一个固定的电脑显示器。

因为许多移动浏览器不支持这一点，我们可以为所有情况编写通用的 css 代码，并在大屏幕上使用这个异常:

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

WindowsXP 和7的默认设置都是每像素1点(或96dpi)。我不知道其他的操作系统是什么样的，但是这个系统真的很适合我的需要。

编辑: abc0在 Internet Explorer 中似乎不起作用. . 改用(96) dpi。

小开

我知道这是一个老线索，但我想这可能会有帮助的人:

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

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

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

小开

我相信检测移动设备的一种更可靠的方法是查看导航器.userAgent 字符串。例如，在我的 iPhone 上，用户代理字符串是:

Mozilla/5.0(iPhone; CPU iPhone OS 10 _ 3.2 like Mac OS X) AppleWebKit/603.2.4(KHTML，like Gecko) Version/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 ;

小开

我是这么做的:

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

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

小开

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

使用下面的 HTML 代码来缩放像素(将较小的像素分组为单位像素大小的组——96dpi，因此 px单元在所有屏幕上具有相同的物理大小)。请注意，这将影响规模几乎在您的网站的一切，但这是一般的方式去时，使网站移动友好。

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

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

小开

很简单！把它扔在类似的，底部的 CSS 文件和这部分的 CSS 将被修改在一个电话:-

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

瞧！

小开

CSS 第5级媒体查询是最好的选择

下面的代码风格 css 触摸屏设备，除了旧的机器人和窗口触摸屏，因为窗口触摸屏是悬浮设备与鼠标指针..。

@media (hover: none) { /* css for touch screen devices except old androids and windows touch screens because windows touch screens are hover-able devices with mouse pointer... */ }

小开

我可能会选择基于 JS 的方法，因为在纯 CSS 中似乎没有一种可靠的/统一的方法来实现这一点。

您可以使用 javascript 来进行检测-插图如下: 检测移动设备的最佳方法是什么？

然后你可以简单地在你的客户端代码中添加这样的东西:

  $("div").addClass("Mobile-Based-Class");

小开

你好,

我知道这个问题太老了，但就我所知，触摸屏的检测仍然是 即使在2022年也很复杂。但是 不是不可能检测，因为有不同的方式来检测一个设备是否使用触摸屏。

下面是使用 CSS和 JavaScript两种不同方法的解决方案:

1-使用 css 的解决方案:

/* if device has a touch screen */
@media (any-pointer: coarse) {
/* do your own styles */
.yourDiv:active {
background-color:red;
}
}


/* if device has no touch screen */
@media (any-pointer: fine) {
/* do your own styles */
.yourDiv:active {
background-color:green;
}
}

重要提示:
使代码能够在所有设备上工作:

必须使用 任意指针
不要只使用指针

2-使用 JavaScript 的解决方案:

/* returns a true value if device has a touch screen no matter what
type of device it is */
var isTouchScreen = 'ontouchstart' in window || navigator.msMaxTouchPoints;


if(isTouchScreen === true) {
alert("You are using a touch screen")
} else {
alert("You are not using a touch screen")
}

结论:

以上代码适用于几乎所有类型的设备和浏览器(不是非常老的版本) ，如果你有一个设备或一个老的浏览器不能与这些解决方案工作，那么你需要做一个特定的代码除了这一个。