iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > VUE >怎么用Javascript识别移动设备
  • 797
分享到

怎么用Javascript识别移动设备

2024-04-02 19:04:59 797人浏览 泡泡鱼
摘要

本篇内容主要讲解“怎么用javascript识别移动设备”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么用Javascript识别移动设备”吧!javascr

本篇内容主要讲解“怎么用javascript识别移动设备”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么用Javascript识别移动设备”吧!

javascript来识别不同的浏览器、windows操作系统各个版本识别方法、识别不同平台Window、Mac、Unix(linux)方法,接下来由南昌网站设计公司技术人员向大家详细介绍使用javascript识别移动设置的方法

相应的用户代理字符串分别为:

Mozilla/5.0 (iPhone;U;CPU like Mac OS X;en) AppleWEBKit/420+ (Khtml, like Gecko)

Version/3.O Mobile/IA543a Saf ari/419.3

Mozilla/5.0 (iPod;U;CPU like Mac OS X;en) AppleWebKit/420+ (KHTML, like Gecko)

Version/3.0 Mobile/IC28 Saf ari/419.3

从这两个字符串来看,很明显iPhone和iPod Touch都使用了Safari(WebKit)。尽管不是真正的Mac平台,但为了保证通过平台检测,用户代理字符串中包含着"CPU like Mac OS x"。有了两个字符串,要检测相应的设备就很简单了。第一步是为要检测的所有移动设备添加属性,如下所示:

然后,通常简单地检测字符串"iPhone"和"iPod",就可以分别设置相应属性的值了:

system.iphone=ua.indexOf("iPhone")>-l;

system.ipod=ua.indexOf("iPod")> -1;

system.macMobile= (system.iphone || system.ipod);

诺基亚N系列手机使用的也是WebKit,其用户代理字符串与其他基于WebKit的手机很相似,例如:

Mozilla/5.O(SymbianOS/9.2; U;Series60/3.1 NokiaN95/11.0.026; Profile MIDP:2.O

Configuration/CLDC-1.1) AppleWebKit/413 (KHTML, like Gecko) Safari/413

虽然诺基亚N系列手机在用户代理字符串中声称使用的是"Safari",但实际上并不是Safari,尽管确实是基于WebKit引擎。只要像下面检测一下用户代理字符串中是否存在"NokiaN",就足以确定是不是该系列的手机了:

system.nokiaN=ua.indexOf("NokiaN")>-1;

在了解这些设备信息的基础上,就可以通过下列代码来确定用户使用的是什么设备中的WebKit来访问网页:

if ( client.engine.webkit){

if (client.system.macMobile){

//Mac手机的内容

} else if ( client.nokiaN){

//诺基亚手机的内容

}}

最后一种主要的移动设备平台是Windows Mobile(也称为Windows CE),用于Pocket PC和Smartphone中。由于从技术上说这些平台都属于Windows平台,因此Windows平台和操作系统都会返回正确的值。对于Windows Mobile 5.0及以前版本,这两种设备的用户代理字符串非常相似,如下

所示:

Mozilla/4.O (compatible; MSIE 4.01; Windows CE; PPC; 240x320)

Mozilla/4.O(compatible; MSIE 4.01; Windows CE; Smartphone; 17 6x220)

第一个来自Pocket PC中的移动Intemet Explorer4.01,第二个来自Smartphone中的同一个浏览器。当Windows操作系统检测脚本检测这两个字符串时,system.win将被设置为"CE",因此在检测

Windows Mobile时可以使用这个值:

system.winMobile= (system.win=="CE");

南昌网络公司技术人员不建议测试字符串中的"PPC"或"Smartphone",因为在Windows Mobile 5.0以后版本的浏览器中,这些记号已经被移除了。不过,一般情况下,只知道某个设备使用的是Windows Mobile也就足够了。

完整代码如下:

var client = function(){

//rendering engines

var engine = {

ie: 0,

gecko: 0,

webkit: 0,

khtml: 0,

opera: 0,

//complete version

ver: null

};

//browsers

var browser = {

//browsers

ie: 0,

firefox: 0,

safari: 0,

konq: 0,

opera: 0,

chrome: 0,

//specific version

ver: null

};

//platfORM/device/OS

var system = {

win: false,

mac: false,

x11: false,

//mobile devices

iphone: false,

ipod: false,

ipad: false,

iOS: false,

Android: false,

nokiaN: false,

winMobile: false,

//game systems

wii: false,

ps: false

};

//detect rendering engines/browsers

var ua = navigator.userAgent;

if (window.opera){

engine.ver = browser.ver = window.opera.version();

engine.opera = browser.opera = parseFloat(engine.ver);

} else if (/AppleWebKit/(S+)/.test(ua)){

engine.ver = RegExp["$1"];

engine.webkit = parseFloat(engine.ver);

//figure out if it's Chrome or Safari

if (/Chrome/(S+)/.test(ua)){

browser.ver = RegExp["$1"];

browser.chrome = parseFloat(browser.ver);

} else if (/Version/(S+)/.test(ua)){

browser.ver = RegExp["$1"];

browser.safari = parseFloat(browser.ver);

} else {

//approximate version

var safariVersion = 1;

if (engine.webkit < 100){

safariVersion = 1;

} else if (engine.webkit < 312){

safariVersion = 1.2;

} else if (engine.webkit < 412){

safariVersion = 1.3;

} else {

safariVersion = 2;

}

browser.safari = browser.ver = safariVersion;

}

} else if (/KHTML/(S+)/.test(ua) || /Konqueror/([^;]+)/.test(ua)){

engine.ver = browser.ver = RegExp["$1"];

engine.khtml = browser.konq = parseFloat(engine.ver);

} else if (/rv:([^)]+)) Gecko/d{8}/.test(ua)){

engine.ver = RegExp["$1"];

engine.gecko = parseFloat(engine.ver);

//determine if it's Firefox

if (/Firefox/(S+)/.test(ua)){

browser.ver = RegExp["$1"];

browser.firefox = parseFloat(browser.ver);

}

} else if (/MSIE ([^;]+)/.test(ua)){

engine.ver = browser.ver = RegExp["$1"];

engine.ie = browser.ie = parseFloat(engine.ver);

}

//detect browsers

browser.ie = engine.ie;

browser.opera = engine.opera;

//detect platform

var p = navigator.platform;

system.win = p.indexOf("Win") == 0;

system.mac = p.indexOf("Mac") == 0;

system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);

//detect windows operating systems

if (system.win){

if (/Win(?:dows )?([^do]{2})s?(d+.d+)?/.test(ua)){

if (RegExp["$1"] == "NT"){

switch(RegExp["$2"]){

case "5.0":

system.win = "2000";

break;

case "5.1":

system.win = "XP";

break;

case "6.0":

system.win = "Vista";

break;

case "6.1":

system.win = "7";

break;

default:

system.win = "NT";

break;

}

} else if (RegExp["$1"] == "9x"){

system.win = "ME";

} else {

system.win = RegExp["$1"];

}

}

}

//mobile devices

system.iphone = ua.indexOf("iPhone") > -1;

system.ipod = ua.indexOf("iPod") > -1;

system.ipad = ua.indexOf("iPad") > -1;

system.nokiaN = ua.indexOf("NokiaN") > -1;

//windows mobile

if (system.win == "CE"){

system.winMobile = system.win;

} else if (system.win == "Ph"){

if(/Windows Phone OS (d+.d+)/.test(ua)){;

system.win = "Phone";

system.winMobile = parseFloat(RegExp["$1"]);

}

}

//determine iOS version

if (system.mac && ua.indexOf("Mobile") > -1){

if (/CPU (?:iPhone )?OS (d+_d+)/.test(ua)){

system.ios = parseFloat(RegExp.$1.replace("_", "."));

} else {

system.ios = 2; //can't really detect - so guess

}

}

//determine Android version

if (/Android (d+.d+)/.test(ua)){

system.android = parseFloat(RegExp.$1);

}

//gaming systems

system.wii = ua.indexOf("Wii") > -1;

system.ps = /playstation/i.test(ua);

//return it

return {

engine: engine,

browser: browser,

system: system

};

}();

到此,相信大家对“怎么用Javascript识别移动设备”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

--结束END--

本文标题: 怎么用Javascript识别移动设备

本文链接: https://www.lsjlt.com/news/96269.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 怎么用Javascript识别移动设备
    本篇内容主要讲解“怎么用Javascript识别移动设备”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么用Javascript识别移动设备”吧!javascr...
    99+
    2024-04-02
  • 用 PHP 检测移动设备
    我们将介绍一些在 PHP 中检测移动设备的方法。在 PHP 中使用 mobiledetect 类检测移动设备我们可以使用名为 Mobile Detect 的轻量级 PHP 类来检测 PHP 中的移动设备。它...
    99+
    2024-02-27
  • win10usb无法识别设备怎么解决
    这篇文章主要讲解了“win10usb无法识别设备怎么解决”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“win10usb无法识别设备怎么解决”吧!win10usb无法识别设备解决方法右键打开“...
    99+
    2023-06-30
  • HTML怎么为移动设备配置视口
    这篇“HTML怎么为移动设备配置视口”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“HTML...
    99+
    2024-04-02
  • Win7旗舰版移动硬盘无法识别怎么办
    Win7旗舰系统用户刚刚购买了使用不久的移动硬盘。今天,他们插入了刚刚重新安装系统的计算机。他们发现移动硬盘不能使用,计算机不能识别移动硬盘。以下是小编分享的一个解决方案,用于解决Win7旗舰版无法识别移动硬盘的问题。Win7旗舰版移动硬盘...
    99+
    2023-07-10
  • win10无法识别的usb设备怎么解决
    如果你的Windows 10无法识别USB设备,可以尝试以下解决方法:1. 重新插拔USB设备:将USB设备从计算机上拔出,然后再重...
    99+
    2023-08-31
    win10
  • win7系统无法识别usb设备怎么办
    这篇文章主要介绍win7系统无法识别usb设备怎么办,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!右单击“我的电脑”,选择“管理”,进入到“计算机管理”窗口。 在“计算机管理”窗口,点击左边的“设备管理器”...
    99+
    2023-06-28
  • 怎么改善移动设备网页的性能
    这篇文章主要为大家展示了“怎么改善移动设备网页的性能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“怎么改善移动设备网页的性能”这篇文章吧。正文1、桌面网页的性能检测桌面浏览器使用的页面可以利用一...
    99+
    2023-06-08
  • 用J2ME在移动设备上实现动画(转)
    用J2ME在移动设备上实现动画(转)[@more@]  使用MIDP(Mobile Information Device Profile)的开发人员经常会抱怨用些什么办法才可以在一个MIDlet上显示动画。MIDP 1.0 没有直接提供对动...
    99+
    2023-06-03
  • 使用rem如何适配移动设备
    使用rem如何适配移动设备?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。1. 动态改变 html 的 font-size 值几乎在每个浏览器都将 html 的 ...
    99+
    2023-06-08
  • win7系统无法识别声卡设备怎么办
    小编给大家分享一下win7系统无法识别声卡设备怎么办,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!首次,大家重启一下电脑,然后在电脑进入到开机画面的滞后就使用快捷...
    99+
    2023-06-27
  • win7不识别usb怎么办?win7无法识别的usb设备的解决方法
      遇到win7无法识别usb设备怎么办下文带给大家的是win7无法识别的usb设备解决方法,很多朋友会遇到win7系统usb无法识别的情况,其实解决方法很简单,希望下文的步骤能够帮助大家解决问题。  &nb...
    99+
    2023-06-03
    win7 usb 解决 设备 方法
  • win10系统无法识别usb媒体设备该怎么办?
    原本在win7上可以识别的设备到win10上反而不能识别?如果你遇到这个问题,此时可参考下面的一种方法来解决。 1、右键左下角开始,选择设备管理器 2、设备管理器中选中异常的媒体设备,点击更新驱动程序 3、选择浏...
    99+
    2023-05-22
    win10 usb
  • 移动设备HTML5页面布局是怎样的
    本篇文章给大家分享的是有关移动设备HTML5页面布局是怎样的,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。结合移动设备(手机和平板电脑)的特性...
    99+
    2024-04-02
  • win7系统怎么解决无法识别usb设备问题
    这篇文章主要介绍win7系统怎么解决无法识别usb设备问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!右单击“我的电脑”,选择“管理”,进入到“计算机管理”窗口。在“计算机管理”窗口,点击左边的“设备管理器”,然后...
    99+
    2023-06-28
  • 移动设备怎么下载Tor和Onion?Android和iOS教程
    众所周知,互联网环境复杂多变,地下环境暗涌浮现。总有人想去看看不一样的互联网,这必然需要强大的工具支撑,今天我们就讲一讲移动端下载Tor的教程 Android 教程 注:还方法同样适用于鸿蒙系统 首先我们保证自己网络顺畅且有科学技术支撑...
    99+
    2023-09-08
    网络
  • HTML 音频标签在移动设备上的应用
    优势: 便捷集成:音频标签可以轻松嵌入 HTML 文档,无需使用外部插件或播放器。 跨平台兼容性:它在大多数移动操作系统和浏览器上都得到广泛支持,确保了跨平台音频播放的兼容性。 设备控制:移动设备上的音频标签通常与设备控制集成,允许用户...
    99+
    2024-03-15
    音频标签
  • Windows中怎么快速修复移动硬盘无法识别读取问题
    这篇文章给大家分享的是有关Windows中怎么快速修复移动硬盘无法识别读取问题的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。方法一右键选择移动硬盘,打开对应属性窗口。在属性界面中,直接点击“工具”下的“检查”进入...
    99+
    2023-06-27
  • 移动设备手势事件库Touch.js的使用方法
    这篇文章主要介绍了移动设备手势事件库Touch.js的使用方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。Touch.js手势库是专门在W...
    99+
    2024-04-02
  • 如何在Linux中进行硬件设备的识别和驱动管理
    在Linux中进行硬件设备的识别和驱动管理通常是通过以下几种方式来实现: 使用命令行工具: lspci:用于显示系统的PCI设...
    99+
    2024-04-02
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作