前段通过js获取手机型号


需求:

用户登录后记录当前的手机型号并记录

插件:

  1. mobile-detect.js插件地址
  2. mobile-device-js插件地址

使用步骤:

  • 获取UA信息->根据安卓和IOS不同的处理
  • IOS再通过插件mobile-device-js去获取型号
  • 安卓通过解析UA信息去获取build之前的信息得到手机型号
//引入插件
<!--获取手机型号相关js-->
<script type="text/javascript" src="/mobile-detect.js"></script>
<!--配合这个js再去获取苹果手机的型号-->
<script type="text/javascript" src="/iphone-device.js"></script>
//获取userAgent信息
var user_agent = navigator.userAgent;
console.log(user_agent);
//初始化mobile-detect
var md = new MobileDetect(user_agent);
var os = md.os();//获取系统
var newMobile = "";
//ios系统的处理
if(os == "iOS"){
os = md.os() + md.version("iPhone");
ios = md.mobile();
//再通过iphone-device.js获取具体的苹果手机型号
newMobile = MobileDevice.getModels().join(' or ');
if(newMobile == 'unknown'){
newMobile = '';
}
}
//Android系统的处理
else if(os == "AndroidOS"){
os = md.os() + md.version("Android");
var sss = user_agent.split(";");
//判断UA里边有没有Build信息,通过这个拿到安卓的具体机型
var i = sss.contains("Build/");
if (i > -1) {
newMobile = sss[i].substring(0, sss[i].indexOf("Build/"));
}
}
//
//判断数组中是否包含某字符串(安卓机型获取用到)
Array.prototype.contains = function(needle) {
for (i in this) {
if (this[i].indexOf(needle) > 0)
return i;
}
return -1;
}
//写入数据库
if(newMobile){
$.get(
'/saveUserMobile.php',{uid:uid, mobile:newMobile},
function(json){
console.log(json.msg);
},'json'
);
}

总结

  • 通过mobile-detect.js插件获取UA信息
  • 安卓系统里通过Build/前一个信息拿到安卓的机型
  • IOS系统里在通过另一个插件mobile-device-js获取具体机型

前端通过js获取手机型号的更多相关文章

  1. JS获取手机型号和系统

    废话不多说,直接上源码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&q ...

  2. js获取手机型号和手机操作系统版本号

    1.js 判断IOS版本号 先来观察 iOS 的 User-Agent 串: iPhone 4.3.2 系统:Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3_2 l ...

  3. 史上最简单,js并获取手机型号

    原先获取不了苹果系列的型号,但转换思路,先推断是否是苹果,再用分辨率获取型号 //获取手机型号函数begin function getPhoneType(){  //正则,忽略大写和小写 var pa ...

  4. android如何获取手机型号和版本号

    public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView ...

  5. iOS获取手机型号,类似iphone 7这种 含swift和OC

    获取手机设备信息,如name.model.version等,但如果想获取具体的手机型号,如iphone5.5s这种,就需要如下这种 swift: func phonetype () -> Str ...

  6. android 获取手机型号,本机电话号码,SDK版本以及firmwarw版本号(即系统版本号)

    Android开发平台中,可通过TelephonyManager 获取本机号码. TelephonyManager phoneMgr=(TelephonyManager)this.getSystemS ...

  7. iOS获取手机型号,Swift获取手机型号(类似iphone 7这种,检测机型具体型号)

    获取手机设备信息,如name.model.version等, 但如果想获取具体的手机型号,如iphone5.5s这种,就需要如下这种(含Swift和OC两种写法) Swift建议添加到extensio ...

  8. iOS获取手机型号、iOS获取当前app的名称和版本号

    NSDictionary *infoDictionary = [[NSBundle mainBundle] infoDictionary]; CFShow(infoDictionary); // ap ...

  9. Android编程获取手机型号,本机电话号码,sdk版本号及firmware版本号号(即系统版本号号)

    Android开发平台中,可通过TelephonyManager 获取本机号码. TelephonyManager phoneMgr=(TelephonyManager)this.getSystemS ...

随机推荐

  1. java 封装返回结果实体类 返回结果以及错误信息

    public class ResponseMessage { private final static String STATUS_OK = "0"; private final ...

  2. Ubuntu16.04 apache2+php7.0+mysql5.7环境搭建

    今天配置一下web环境,很常见的apache+php+mysql的网站环境: 步骤一:安装apache sudo apt install apache2 步骤二:安装php7 1.安装PHP7和响应的 ...

  3. Oracle虚拟机 与 windows配置

    目录 相关资料 安装虚拟机及相关配置 安装PLSQL Developer Navicat Premium登录数据库 踩坑之路 相关资料 oracle虚拟机配置 提取码:s3sg 安装虚拟机及相关配置 ...

  4. Webpack中的sourcemap以及如何在生产和开发环境中合理的设置

    一 . 从Sourcemap和Data URL说起 (1)什么是Sourcemap? 我们在打包中,将开发环境中源代码经过压缩,去空格,babel编译转化,最终可以得到适用于生产环境的项目代码,这样处 ...

  5. 画布之ShapeDrawable

    package com.loaderman.customviewdemo; import android.content.Context; import android.graphics.Canvas ...

  6. 阶段5 3.微服务项目【学成在线】_day18 用户授权_12-前端集成认证授权-携带JWT授权

    携带JWT授权 登陆后jwt已经存到了sessionStorage里面 当进行微服务的请求就要携带令牌.我们在拦截器里面做文章. 在axios的intercepters拦截器上 手工的给这个课程 造一 ...

  7. vue-cli 引入stylus报错

    在App.vue页面添加以下代码报错: <style lang="stylus" rel="stylesheet/stylus"> </sty ...

  8. nginx利用fastcgi_cache模块缓存

    nginx不仅有个大家很熟悉的缓存代理后端内容的proxy_cache,还有个被很多人忽视的fastcgi_cache.proxy_cache的作用是缓存后端服务器的内容,可能是任何内容,包括静态的和 ...

  9. 【Leetcode_easy】693. Binary Number with Alternating Bits

    problem 693. Binary Number with Alternating Bits solution1: class Solution { public: bool hasAlterna ...

  10. Vue项目过程中遇到的小问题

    1.给router-link添加点击事件 <router-link to="" @click.native=""></router-link& ...