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

Question

有没有办法检测是否使用了手持浏览器(iOS/Android手机/平板电脑)？

我试过这个目标是在手持设备上的浏览器中制作一半宽的元素,但它没有什么区别.

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

可以这样做,如果是这样的话怎么办？

编辑:从我使用的jmaes回答中的引用页面

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

Answer 1

更新(2016年6月):我现在尝试在每个分辨率上支持触摸和鼠标输入,因为设备环境正在慢慢模糊事物之间和不是触摸设备之间的界限.iPad专业版只有13英寸笔记本电脑的触控功能.现在,Windows笔记本电脑经常配备触摸屏.

其他类似的SO答案(请参阅此问题的其他答案)可能有不同的方法来试图找出用户使用的设备类型,但它们都不是万无一失的.如果您绝对需要尝试确定设备,我建议您检查这些答案.

例如,iPhone会忽略handheld查询(来源).如果其他智能手机出于类似的原因,我也不会感到惊讶.

我用来检测移动设备的当前最佳方式是知道它的宽度并使用相应的媒体查询来捕获它.那里的链接列出了一些流行的.我确定,快速谷歌搜索可以为您提供您可能需要的任何其他内容.

对于更多iPhone特定的(如Retina显示屏),请查看我发布的第一个链接.

Answer 2

这是我的操作方式：

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

基于/sf/answers/2998507851/

Answer 3

以下是使用两种不同方法的解决方案：

使用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; 
    }
}

重要提示：
要使代码在所有设备上运行，您必须使用any-pointer，而不是pointer

使用 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")
}

Answer 4

检测移动设备

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

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

Answer 5

不要检测移动设备,而是选择固定设备.

如今(2016),有一种方法可以检测每英寸/厘米/平方点的点数,它似乎适用于大多数现代浏览器(参见http://caniuse.com/#feat=css-media-resolution).我需要一种方法来区分相对较小的屏幕,方向无关紧要,以及固定的电脑显示器.

由于许多移动浏览器不支持此功能,因此可以为所有情况编写通用css代码,并将此异常用于大屏幕:

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

Windows XP和7都默认设置为每像素1点(或96dpi).我不了解其他操作系统,但这对我的需求非常有用.

编辑:dppx似乎无法在Internet Explorer中工作..请改用(96)dpi.

Answer 6

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

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

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

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

Answer 7

我相信检测移动设备的更可靠的方法是查看 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 ;