检测手机与平板电脑

2021/01/31 08:51 · jquery ·  · 0评论

有没有一种方法可以检测用户使用的是平板电脑还是电话?例如,一个人使用平板电脑(任何版本3+和iPad的android平板电脑)上网冲浪,他们肯定希望查看与坐在台式计算机上的人相同的版本。电话冲浪者肯定会喜欢该网站的精简版本,因为它的加载速度更快,并且可能更容易用拇指导航。这可以通过检查在此处找到的userAgent oct屏幕宽度来完成:

在jQuery中检测移动设备的最佳方法是什么?

但是问题出在诸如谷歌Galaxy Nexus之类的手机上,该手机具有与平板电脑相同的分辨率,但只有屏幕尺寸的一半。我认为最好显示移动版本,因为即使分辨率很高,屏幕也很小。

有没有办法检测到这一点,或者我必须做出让步?

我认为您在这里基本上是在平板电脑,手机或任何其他支持网络的设备之间进行区分。屏幕的物理尺寸似乎是您要用来决定所提供内容的指标。

在这种情况下,我将尝试基于用户代理在HTTP标头([mobiforge.com ...])中传递的值来实现逻辑,并在信息不可用的情况下优雅地降级为提示用户。

您的逻辑可能看起来像这样:

  • 如果用户代理在HTTP标头中提供了物理屏幕尺寸,则

    物理尺寸= UA值。
  • 否则,如果用户代理提供了分辨率和像素尺寸,则

    物理尺寸=像素尺寸除以分辨率。
  • (可选)否则,请使用客户端脚本检测分辨率和PPI
  • 否则,如果用户代理字符串看起来像某种移动设备(regex),则

    提示用户进行选择。
  • 否则,

    采用默认选项。

更新:我的答案现在已经三岁了。值得注意的是,对响应式设计的支持已经取得了显着进步,并且现在已经普遍向所有设备提供相同的内容,并依靠CSS媒体查询以一种最有效的方式呈现该网站。

根据google的建议:在这里(也由Greg引用),这是我以前在项目中使用的内容。

if (/mobile/i.test(navigator.userAgent) && !/ipad|tablet/i.test(navigator.userAgent)) {
    console.log("it's a phone"); // your code here
}

这可能不是最优雅的解决方案……但是它确实可以完成工作。

如果您在理论上使用媒体查询,则可以使用@media掌上电脑,但几乎不存在支持。

识别高分辨率移动设备的最简单方法是查看屏幕的DPI和设备像素比率(当前通过webkit / mozilla供应商特定的标签)

@media (-webkit-max-device-pixel-ratio: 2),  
(max--moz-device-pixel-ratio: 2), 
(min-resolution: 300dpi) {
   ...
}

编辑:window.devicePixelRatio在JS中执行上述操作

这里有一篇不错的文章,其中包含许多有关识别移动设备的想法。

http://davidbcalhoun.com/2010/using-mobile-specific-html-css-javascript

如果您使用的是Cordova,我会这样:

cordova plugin add uk.co.workingedge.phonegap.plugin.istablet

然后在代码中的任何地方调用此代码:

window.isTablet

不幸的是,到目前为止,区分手机和平板电脑的唯一可靠方法是通过用户代理字符串。

我尚未找到包含设备尺寸的用户代理。

如果您尝试计算设备的ppi,则无论台式机还是手机,它们几乎都会不可避免地达到96ppi。

在用户代理字符串中搜索iPad / iPod / iPhone,以检测任何Apple设备。这将告诉您是否装有Apple的平板电脑或电话/ iPod。幸运的是,i设备的口味要少得多,因此也更容易区分它们。

要标识Android设备,请在用户代理字符串中搜索“ Android”。要确定它是平板电脑还是手机,电话用户代理(适用于本机android浏览器和chrome)将包含“ Mobile Safari”,而平板电脑将仅包含“ Safari”。Google建议使用此方法:

作为针对移动网站的解决方案,我们的Android工程师建议专门检测User-Agent字符串中的“移动”以及“ android”。

可以在这里找到更完整的描述:

http://googlewebmastercentral.blogspot.com/2011/03/mo-better-to-also-detect-mobile-user.html

当然这不是理想的,但看起来是唯一可靠的方法。作为警告,通过查看大量的用户代理字符串样本列表(将近一百个),我确实看到一两个旧设备未正确遵守“移动”与“移动Safari”的区别。

您可以使用Device Atlas之类的功能从用户代理中检测这些功能。提供您可以托管的API,并且他们还提供云服务。两者都是溢价(付费)

或者,您可以使用像Wurfl这样的东西,根据我的经验,它不太准确。

当您问他们时,为什么要尝试猜测用户拥有什么?您可以使用分辨率来猜测正在使用哪种设备,并询问用户他们想要哪种视图,如果它属于可能的移动设备或平板电脑类别。如果您发现它是错误的,那么这对于用户来说很麻烦。我认为,一次询问他们拥有的设备类型会更方便。

我认为WURFL可能值得一看:http :

//wurfl.sourceforge.net/help_doc.php由于它具有更多的服务器端解决方案,而不是仅通过简单的媒体查询(例如,您自己的或使用Foundation CSS这样的框架)或纯JavaScript(adapt.js)。

比可以做类似的事情:

$is_wireless = ($requestingDevice->getCapability('is_wireless_device') == 'true');
$is_smarttv = ($requestingDevice->getCapability('is_smarttv') == 'true');
$is_tablet = ($requestingDevice->getCapability('is_tablet') == 'true');
$is_phone = ($requestingDevice->getCapability('can_assign_phone_number') == 'true');

if (!$is_wireless) {
 if ($is_smarttv) {
  echo "This is a Smart TV";
 } else {
  echo "This is a Desktop Web Browser";
 }
} else {
 if ($is_tablet) {
  echo "This is a Tablet";
 } else if ($is_phone) {
  echo "This is a Mobile Phone";
 } else {
  echo "This is a Mobile Device";
 }
}

参考:http : //wurfl.sourceforge.net/php_index.php

或使用Java:

WURFLHolder wurfl = (WURFLHolder) getServletContext().getAttribute(WURFLHolder.class.getName());
WURFLManager manager = wurfl.getWURFLManager();
Device device = manager.getDeviceForRequest(request);
String x = device.getCapability("is_tablet"); //returns String, not boolean btw

参考:http : //wurfl.sourceforge.net/njava_index.php

正如许多其他张贴者所指出的那样,您可能会想解析User-Agent请求标头。为此,我发现ua-parser-js库非常有帮助。

本文地址:http://jquery.askforanswer.com/jianceshoujiyupingbandiannao.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!