CSS 检测是否使用移动设备（iOS/Android 手机/平板电脑）中的浏览器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14942081/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Detect if a browser in a mobile device (iOS/Android phone/tablet) is used
提问by seron
Is there a way to detect if a handheld browser is used (iOS/Android phone/tablet)?
有没有办法检测是否使用了手持浏览器（iOS/Android 手机/平板电脑）？
I tried this with the goal to make an element half as wide in a browser on a handheld device but it doesn't make a difference.
我尝试这样做的目的是使一个元素在手持设备上的浏览器中宽度减半，但这并没有什么不同。
width: 600px;
@media handheld { width: 300px; }
Can it be done and if so how?
可以做到吗？如果可以，怎么做？
edit:From the referred page in jmaes' answer I used
编辑：从我使用的 jmaes 答案中的引用页面
@media only screen and (max-device-width: 480px).
@media only screen and (max-device-width: 480px).
采纳答案by jamesplease
Update (June 2016): I now try to support touch and mouse input on every resolution, since the device landscape is slowly blurring the lines between what things are and aren't touch devices. iPad Pros are touch-only with the resolution of a 13" laptop. Windows laptops now frequently come with touch screens.
更新（2016 年 6 月）：我现在尝试在每个分辨率上支持触摸和鼠标输入，因为设备环境正在慢慢模糊触摸设备和非触摸设备之间的界限。iPad Pro 只能触摸，分辨率与 13" 笔记本电脑相同。Windows 笔记本电脑现在经常配备触摸屏。
Other similar SO answers (see other answer on this question) might have different ways to try to figure out what sort of device the user is using, but none of them are fool-proof. I encourage you to check those answers out if you absolutely need to try to determine the device.
其他类似的 SO 答案（请参阅此问题的其他答案）可能有不同的方法来尝试找出用户使用的设备类型，但它们都不是万无一失的。如果您绝对需要尝试确定设备，我鼓励您检查这些答案。
iPhones, for one, ignore the handheldquery (Source). And I wouldn't be surprised if other smartphones do, too, for similar reasons.
一方面，iPhone 忽略handheld查询（Source）。如果其他智能手机也出于类似原因，我也不会感到惊讶。
The current best way that I use to detect a mobile device is to know its width and use the corresponding media queryto catch it. That link there lists some popular ones. A quick Google search would yield you any others you might need, I'm sure.
目前我用来检测移动设备的最好方法是知道它的宽度并使用相应的媒体查询来捕获它。该链接列出了一些流行的链接。我敢肯定，快速的 Google 搜索会为您提供您可能需要的任何其他内容。
For more iPhone-specific ones (such as Retina display), check out that first link I posted.
对于更多特定于 iPhone 的（例如 Retina 显示屏），请查看我发布的第一个链接。
回答by GrayFace
Here's how I did it:
这是我如何做到的：
@media (pointer:none), (pointer:coarse) {
}
回答by Matt Coughlin
Detecting mobile devices
检测移动设备
Related answer: https://stackoverflow.com/a/13805337/1306809
相关答案：https: //stackoverflow.com/a/13805337/1306809
There's no single approach that's truly foolproof. The best bet is to mix and match a variety of tricks as needed, to increase the chances of successfully detecting a wider range of handheld devices. See the link above for a few different options.
没有一种方法是真正万无一失的。最好的办法是根据需要混合搭配各种技巧，以增加成功检测更多手持设备的机会。有关几个不同的选项，请参阅上面的链接。
回答by LGT
Don't detect mobile devices, go for stationary ones instead.
不要检测移动设备，而是使用固定设备。
Nowadays (2016) there is a way to detect dots per inch/cm/px that seems to work in most modern browsers (see http://caniuse.com/#feat=css-media-resolution). I needed a method to distinguish between a relatively small screen, orientation didn't matter, and a stationary computer monitor.
如今（2016 年）有一种方法可以检测每英寸/厘米/像素的点数，这似乎适用于大多数现代浏览器（参见http://caniuse.com/#feat=css-media-resolution）。我需要一种方法来区分相对较小的屏幕（方向无关紧要）和固定的计算机显示器。
Because many mobile browsers don't support this, one can write the general css code for all cases and use this exception for large screens:
因为很多手机浏览器不支持这个，大家可以写通用的css代码来处理所有情况，大屏使用这个例外：
@media (max-resolution: 1dppx) {
/* ... */
}
Both Windows XP and 7 have the default setting of 1 dot per pixel (or 96dpi). I don't know about other operating systems, but this works really well for my needs.
Windows XP 和 7 都有每像素 1 点（或 96dpi）的默认设置。我不知道其他操作系统，但这对我的需求非常有效。
Edit: dppxdoesn't seem to work in Internet Explorer.. use (96)dpi instead.
编辑：dppx在 Internet Explorer 中似乎不起作用.. 改用 (96)dpi。
回答by Jesse Heines
I believe that a much more reliable way to detect mobile devices is to look at the navigator.userAgent string. For example, on my iPhone the user agent string is:
我相信检测移动设备的更可靠的方法是查看 navigator.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
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
Note that this string contains two telltale keywords: iPhone and Mobile. Other user agent strings for devices that I don't have are provided at:
请注意，此字符串包含两个告密关键字：iPhone 和 Mobile。我没有的设备的其他用户代理字符串在以下位置提供：
https://deviceatlas.com/blog/list-of-user-agent-strings
https://deviceatlas.com/blog/list-of-user-agent-strings
Using this string, I set a JavaScript Boolean variable bMobile on my website to either true or false using the following code:
使用此字符串，我使用以下代码将网站上的 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 ;
回答by potato
Many mobile devices have resolutions so high that it's hard to distinguish between them and much larger screens. There are two ways to deal with this problem:
许多移动设备的分辨率如此之高，以至于很难将它们与更大的屏幕区分开来。有两种方法可以处理这个问题：
Use the following HTML code to scale the pixels (grouping smaller pixels into groups the size of the unit pixel - 96dpi, so pxunits will have the same physical size on all screens). Note that this will affect the scale of pretty much everything in your website, but this is generally the way to go when making sites mobile-friendly.
使用以下 HTML 代码缩放像素（将较小的像素分组为单位像素的大小 - 96dpi，因此px单位在所有屏幕上将具有相同的物理大小）。请注意，这会影响您网站中几乎所有内容的规模，但这通常是使网站适合移动设备的方法。
<meta name="viewport" content="width=device-width, initial-scale=1">
Alternatively, measuring the screen width in @mediaqueries using cminstead of pxunits can tell you if you're dealing with a physically small screen regardless of resolution.
或者，@media使用cm而不是px单位测量查询中的屏幕宽度可以告诉您是否正在处理物理上较小的屏幕，而不管分辨率如何。
回答by m33x
I know this is an old thread but I thought this might help someone:
我知道这是一个旧线程，但我认为这可能对某人有所帮助：
Mobile devices have greater height than width, in contrary, computers have greater width than height. For example:
移动设备的高度大于宽度，相反，计算机的宽度大于高度。例如：
@media all and (max-width: 320px) and (min-height: 320px)
so that would have to be done for every width i guess.
所以我猜每个宽度都必须这样做。
