判断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 解析json的代码
Dec 16 Javascript
简略说明Javascript中的= =(等于)与= = =(全等于)区别
Apr 16 Javascript
javascript实现完美拖拽效果
May 06 Javascript
js实现登陆遮罩效果的方法
Jul 28 Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
Nov 30 Javascript
jQuery Timelinr实现垂直水平时间轴插件(附源码下载)
Feb 16 Javascript
Javascript this 函数深入详解
Dec 13 Javascript
使用JS模拟锚点跳转的实例
Feb 01 Javascript
微信小程序实现分享朋友圈的图片功能示例
Jan 18 Javascript
d3.js实现图形拖拽
Dec 19 Javascript
JS Web Flex弹性盒子模型代码实例
Mar 10 Javascript
JS中FileReader类实现文件上传及时预览功能
Mar 27 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
在任意字符集下正常显示网页的方法一
2007/04/01 PHP
php遍历文件夹所有文件子文件夹函数代码
2013/11/27 PHP
PHP中使用数组指针函数操作数组示例
2014/11/19 PHP
通过php添加xml文档内容的方法
2015/01/23 PHP
PHP面向对象程序设计OOP继承用法入门示例
2016/12/27 PHP
来自qq的javascript面试题
2010/07/24 Javascript
利用js的Node遍历找到repeater的一个字段实例介绍
2013/04/25 Javascript
通过js获取div的background-image属性
2013/10/15 Javascript
Google (Local) Search API的简单使用介绍
2013/11/28 Javascript
JS实现文件动态顺序载入的方法
2015/03/07 Javascript
jquery ajax分页插件的简单实现
2016/01/27 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
2017/09/11 Javascript
浅谈node的事件机制
2017/10/09 Javascript
webpack公共组件引用路径简化小技巧
2018/06/15 Javascript
JavaScript中工厂函数与构造函数示例详解
2019/05/06 Javascript
JS实现页面跳转与刷新的方法汇总
2019/08/30 Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
2020/01/07 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
2020/04/07 Javascript
在项目vue中使用echarts的操作步骤
2020/09/07 Javascript
js动态添加带圆圈序号列表的实例代码
2021/02/18 Javascript
[48:52]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第一局
2016/02/25 DOTA
在Python的Django框架中用流响应生成CSV文件的教程
2015/05/02 Python
Python使用PIL库实现验证码图片的方法
2016/03/11 Python
python机器学习实战之树回归详解
2017/12/20 Python
Python Numpy:找到list中的np.nan值方法
2018/10/30 Python
TENSORFLOW变量作用域(VARIABLE SCOPE)
2020/01/10 Python
详解字符串在Python内部是如何省内存的
2020/02/03 Python
Python matplotlib实时画图案例
2020/04/23 Python
python如何修改文件时间属性
2021/02/05 Python
中学生个人自我评价
2014/02/06 职场文书
安全保卫工作竞聘材料
2014/08/25 职场文书
新员工辞职信范文
2015/05/12 职场文书
2016学校先进集体事迹材料
2016/02/29 职场文书
深入理解margin塌陷和margin合并的解决方案
2021/06/26 HTML / CSS
使用 Docker Compose 构建复杂的多容器App
2022/04/30 Servers
app场景下uniapp的扫码记录
2022/07/23 Java/Android