vue如何判断安卓还是IOS
更新时间:2022年04月12日 17:05:07 作者:周小盗
这篇文章主要介绍了vue如何判断安卓还是IOS,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
vue判断安卓还是IOS
最近工作上遇到这样一个需求
vue写的页面,需要同时跟安卓和ios进行交互;
- 若是安卓,执行代码:android.finishActivity();
- 若是IOS,执行代码:
try { window.webkit.messageHandlers.finishActivity.postMessage(""); }catch(error) { console.log('WKWebView post message'); }
所以我们需要进行一个判断
是安卓还是IOS:因为是做的单独的APP所以没有考虑微信的问题
finishActivity() { let ua = navigator.userAgent.toLowerCase(); //android终端 let isAndroid = ua.indexOf('Android') > -1 || ua.indexOf('Adr') > -1; //ios终端 let isiOS = !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //ios console.log(" 我是ios") //这里是和IOS商量好的写法,调用IOS的finishActivity方法 try { window.webkit.messageHandlers.finishActivity.postMessage(""); }catch(error) { console.log('WKWebView post message'); } } else(/(Android)/i.test(navigator.userAgent)) { //android console.log("我是android") //这里是和安卓商量好的写法,调用安卓的finishActivity方法 android.finishActivity(); } }
然后就可以一个页面同时给安卓和IOS进行交互啦!
H5端判断安卓跟ios显示不同的背景图
html:
<div :class="`${isApple==true ? 'index-cont-phone' : 'index-cont'}`" ></div>
css:
.index-cont{ width: 100%; height: auto; min-height: 100vh; overflow-x:hidden; background: url("https://tuoluohuodong.oss-cn-shenzhen.aliyuncs.com/interaction_h5/main_bg3.png") no-repeat; background-size: contain; margin: 0; padding-bottom: 199%; // position: fixed; } .index-cont-phone{ width: 100%; height: auto; min-height: 100vh; overflow-x:hidden; background: url("https://tuoluohuodong.oss-cn-shenzhen.aliyuncs.com/interaction_h5/main_bg4.png") no-repeat; background-size: contain; margin: 0; padding-bottom: 199%; // position: fixed; }
js:
<script> export default { name: "index", data() { return { isApple:true, } }, }, methods: { // 判断是安卓还是ios appDown() { var u = navigator.userAgent; var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端 if(isiOS){ this.isApple = true }else if(isAndroid){ this.isApple = false } }, mounted() { // 调用判断ios与安卓方法 this.appDown(); }, } </script>
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
vue3 ts组合式API异常onMounted is called when&
这篇文章主要为大家介绍了vue3 ts组合式API异常onMounted is called when there is no active component问题解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-05-05element 结合vue 在表单验证时有值却提示错误的解决办法
这篇文章主要介绍了element 结合vue 在表单验证下,有值却提示错误的解决办法,需要的朋友可以参考下2018-01-01详解vue-template-admin三级路由无法缓存的解决方案
这篇文章主要介绍了vue-template-admin三级路由无法缓存的解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2020-03-03
最新评论