確定用戶是否在移動設備上的最簡單方法

Question

我在我的網站上顯示了一個通知欄，坦率地說，當它在移動設備上時效果不佳。 我只想為桌面用戶顯示該欄。

確定用戶是使用台式機還是移動設備的最簡單方法是什么？

Answer 1

檢查這個http://detectmobilebrowsers.com/

為 Javascript、jQuery 等工作。

Answer 2

用戶代理檢查是“最簡單的”，盡管您可以輕松使用CSS3 媒體查詢

下面是一個檢查 iphone、android 和 blackberry 的例子； 您可以輕松添加其他移動瀏覽器。

var is_mobile = !!navigator.userAgent.match(/iphone|android|blackberry/ig) || false;

Answer 3

我發現最好使用特征檢測。 使用Modernizr檢測它是否是觸摸設備。 您可以執行以下操作：

var mousedown = 'mousedown';

if (Modernizr.touch) {
    mousedown = 'touchstart';
}

$('.foo').on(mousedown, handleMouseDown);

然后使用 CSS Media Queries 處理屏幕寬度（使用 javascript 檢測屏幕寬度也很容易）。 這樣您就可以正確處理大屏幕的觸摸設備，或小屏幕的非觸摸設備。

Answer 4

如果您使用Modernizr 。 一個“非接觸”類將被添加到元素中。 如果存在“no-touch”類，您可以默認隱藏欄並添加 css 規則以顯示欄。 例子：

默認：

.bar{display:none;}

桌面：

.no-touch .bar{display:block;}

Answer 5

如果用戶在移動設備上，此 javascript 'if' 將返回 true。

if (navigator.userAgent.indexOf('Mobile') !== -1) { ...

另請參閱： https : //deviceatlas.com/blog/list-of-user-agent-strings

Answer 6

區分觸摸設備和非觸摸設備的最簡單方法是使用媒體查詢。

1) 可以使用媒體查詢編寫針對移動/觸摸設備的 CSS，

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

2) 可以使用媒體查詢編寫針對桌面/非觸摸設備（僅限）的 CSS，

  @media not all and (pointer: coarse) {}

在少數最新的移動設備（例如：IOS 10+、一加等）上檢測到懸停，因此我們使用 (2) 來識別非觸摸設備。

Answer 7

 const is_mobile = navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/BlackBerry/i);

if (is_mobile != null){
    popup.modal('show');
}

Answer 8

如果您正在閱讀 2021 年的這篇文章，那么還有一種更簡單的方法可以找到它。

let isMobile = window.navigator.userAgentData.mobile;
console.log(isMobile);

上述方法只返回一個 boolean 值。