判断iOS、Android以及PC端的示例代码


Posted in Javascript onNovember 15, 2018

前言

我们在做移动端时,在跨平台、浏览器、移动设备兼容的时候,要根据设备、浏览器做特定调整,想起用navigator.userAgent来对浏览器类型进行判断,查了点资料,在这里总结下

还有一个就是移动端的缩放问题,在meta标签中进行设置,对部分浏览器进行强制性的限制

1.navigator的一些常用属性

navigator为window对象的一个属性,指向了一个包含浏览器相关信息的对象

navigator.appVersion 浏览器的版本号
navigator.language 浏览器使用的语言
navigator.userAgent 浏览器的userAgent信息

其中userAgent 属性是一个只读的字符串,声明了浏览器用于 HTTP 请求的用户代理头的值。

2.较常见的ios端、Android端及PC端的判断

简单点的

/* 判断浏览器类型 */
let userAgent = navigator.userAgent;
/* 判断手机型号 */
let app = navigator.appVersion;
/* Android 终端 */
let isAndroid = userAgent.indexOf('Android');
/* ios终端 */
let isMac = !!userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);

封装性的

/* 判断各类型方法 */
const browser = {
 version: function() {
  const userAgent = navigator.userAgent;
  return {
   /* 判断是否是ios */
   ios: !!userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
   /* 判断是否是Android */
   android: userAgent.indexOf('Android') > -1 || userAgent.indexOf('Adr') > -1,

   /* 判断是否是移动端 */
   mobilePhone: !!userAgent.match(/AppleWebKit.*Mobile.*/),

   /* IE内核 */
   trident: userAgent.indexOf('Trident') > -1,
   /* opera内核 */
   presto: userAgent.indexOf('Presto') > -1,
   /* 苹果、谷歌内核 */
   webkit: userAgent.indexOf('AppleWebKit') > -1,
   /* 火狐内核 */
   gecko: userAgent.indexOf('Gecko') > -1 && userAgent.indexOf('KHTML') == -1,


   /* 判断是否是IPone手机或者QQHD浏览器 */
   iphone: userAgent.indexOf('iPhone') > -1,
   /* 判断是否是iPad */
   iPad: userAgent.indexOf('iPad') > -1,

   /* 判断是否是web应用程序(能够让用户完成某些特定任务的网站),没有头部和底部 */
   webApp: userAgent.indexOf('Safari'),
   /* 是否是微信 */
   weixin: userAgent.indexOf('MicroMessenger'),
   /* QQ */
   QQ: userAgent.match(/\sQQ/i) == ' qq',
  }
 }(),
 /* 判断浏览器使用的语言:navigator.language除IE浏览器外的浏览器使用的语言, 
 * navigator.browserLanguageIE浏览器使用的语言 
 */
 browserLanguage: (navigator.language || navigator.browserLanguage).toLowerCase()
};
if(browser.version.ios || browser.version.android || browser.version.mobilePhone) {
 console.log('是移动端');
}

3.meta标签设置

如对浏览器进行强制全屏的设置(UC全屏),webapp模式等

<meta charset="UTF-8">
<!-- 视图窗口,移动端特属的标签 -->
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="x-ua-compatible" content="IE=edge">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- 是否启动webapp功能,会删除默认的苹果工具栏和菜单栏 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- 这个主要是根据实际的页面设计的主体色为搭配来进行设置 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- 忽略页面中的数字识别为电话号码,email识别 -->
<meta name="format-decoration" content="telephone=no,email=no">
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JavaScript国旗变换效果代码
Aug 13 Javascript
JavaScript中的异常捕捉介绍
Dec 31 Javascript
AngularJS数据源的多种获取方式汇总
Feb 02 Javascript
JS实现向iframe中表单传值的方法
Mar 24 Javascript
Js面试算法详解
Apr 08 Javascript
Vue实现用户自定义字段显示数据的方法
Aug 28 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
Nov 27 Javascript
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
利用es6 new.target来对模拟抽象类的方法
May 10 Javascript
JavaScript数组去重实现方法小结
Jan 17 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
Jul 21 Javascript
详解uniapp的全局变量实现方式
Jan 11 Javascript
IE8中jQuery.load()加载页面不显示的原因
Nov 15 #jQuery
详解ES6 Fetch API HTTP请求实用指南
Nov 14 #Javascript
微信小程序购物车、父子组件传值及calc的注意事项总结
Nov 14 #Javascript
微信小程序中遇到的iOS兼容性问题小结
Nov 14 #Javascript
javascript中一些奇葩的日期换算方法总结
Nov 14 #Javascript
element vue Array数组和Map对象的添加与删除操作
Nov 14 #Javascript
ES6 fetch函数与后台交互实现
Nov 14 #Javascript
You might like
php cli 小技巧
2013/06/03 PHP
使用PHP如何实现高效安全的ftp服务器(一)
2015/12/20 PHP
php版微信小店调用api示例代码
2016/11/12 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
Javascript Math对象
2009/08/13 Javascript
40款非常有用的 jQuery 插件推荐(系列一)
2011/12/21 Javascript
JS中的log对象获取以及debug的写法介绍
2014/03/03 Javascript
js实现图片旋转的三种方法
2014/04/10 Javascript
JavaScript程序设计之JS调试
2015/12/09 Javascript
JavaScript模版引擎的基本实现方法浅析
2016/02/15 Javascript
BootStrap Typeahead自动补全插件实例代码
2016/08/10 Javascript
关于Iframe父页面与子页面之间的相互调用
2016/11/22 Javascript
关于javascript作用域的常见面试题分享
2017/06/18 Javascript
[01:18]一目了然!DOTA2DotA快捷操作对比第一弹
2014/07/01 DOTA
Python学习之asyncore模块用法实例教程
2014/09/29 Python
解决PyCharm import torch包失败的问题
2018/10/13 Python
python用插值法绘制平滑曲线
2021/02/19 Python
Python日期时间Time模块实例详解
2019/04/15 Python
numpy.random模块用法总结
2019/05/27 Python
python实现大文本文件分割
2019/07/22 Python
Python 日志logging模块用法简单示例
2019/10/18 Python
Python使用matplotlib 画矩形的三种方式分析
2019/10/31 Python
python实现的批量分析xml标签中各个类别个数功能示例
2019/12/30 Python
Selenium之模拟登录铁路12306的示例代码
2020/07/31 Python
python如何运行js语句
2020/09/09 Python
银河香水:Galaxy Perfume
2019/03/25 全球购物
美国排名第一的泳池用品直接来源:In The Swim
2019/09/23 全球购物
说一下Linux下有关用户和组管理的命令
2016/01/04 面试题
幼儿园亲子活动总结
2014/04/26 职场文书
诉前财产保全担保书
2014/05/20 职场文书
大学专科自荐信
2014/06/17 职场文书
大学生个人学年总结
2015/02/15 职场文书
博士给导师的自荐信
2015/03/06 职场文书
学困生帮扶工作总结
2015/08/13 职场文书
干货:如何写好观后感 !
2019/05/21 职场文书
Python读写yaml文件
2022/03/20 Python