68

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

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

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

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

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

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

4

8 回答 8

39

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

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

一方面，iPhone 忽略了handheld查询（Source）。如果其他智能手机也出于类似的原因，我也不会感到惊讶。

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

有关更多特定于 iPhone 的内容（例如 Retina 显示屏），请查看我发布的第一个链接。

于 2013-02-18T17:41:20.587 回答
38

我是这样做的：

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

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

于 2018-05-12T02:18:16.833 回答
13

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

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

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

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

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

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

于 2016-07-09T11:58:46.690 回答
10

检测移动设备

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

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

于 2013-02-18T18:00:41.843 回答
5

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

请注意，此字符串包含两个说明关键字：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 ;
于 2017-06-20T21:08:13.443 回答
2

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

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

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

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

于 2020-04-05T01:03:16.097 回答
-2

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

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

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

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

于 2017-06-05T08:51:43.203 回答
-7

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

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

瞧！

于 2021-02-12T17:31:57.600 回答