广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue如何判断安卓还是IOS
  • 104
分享到

vue如何判断安卓还是IOS

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

目录Vue判断安卓还是iOS最近工作上遇到这样一个需求所以我们需要进行一个判断H5端判断安卓跟ios显示不同的背景图vue判断安卓还是IOS 最近工作上遇到这样一个需求 vue写的页

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("/file/imgs/upload/202211/13/z3sy1xkgvrz.jpg") 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("/file/imgs/upload/202211/13/atvmzimr4bm.jpg") 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>

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。 

--结束END--

本文标题: vue如何判断安卓还是IOS

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

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

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

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

下载Word文档
猜你喜欢
  • vue如何判断安卓还是IOS
    目录vue判断安卓还是IOS最近工作上遇到这样一个需求所以我们需要进行一个判断H5端判断安卓跟ios显示不同的背景图vue判断安卓还是IOS 最近工作上遇到这样一个需求 vue写的页...
    99+
    2022-11-13
  • vue怎么判断安卓还是IOS
    这篇文章主要介绍“vue怎么判断安卓还是IOS”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue怎么判断安卓还是IOS”文章能帮助大家解决问题。vue判断安卓还是IOS最近工作上遇到这样一个需求v...
    99+
    2023-06-30
  • php如何判断是安卓还是ios开发
    小编给大家分享一下php如何判断是安卓还是ios开发,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!php判断是安卓还是ios的方法:1、创建一个PHP示例文件;2...
    99+
    2023-06-25
  • php怎么判断是安卓还是ios开发
    本文操作环境:windows7系统、PHP7.1版、DELL G3电脑PHP判断手机是IOS还是Android本文介绍了PHP判断手机是IOS还是Android的三个小实例,要判断用户的手机是安卓的还是ios的,搜了一下相关的资料,最终获得...
    99+
    2016-07-09
    php 安卓 ios
  • php判断是ios手机还是安卓手机
    可以使用PHP中的$_SERVER['HTTP_USER_AGENT']全局变量来判断用户的设备类型。根据不同的设备类型,可以判断是iOS手机还是安卓手机。 下面是一个示例代码: ...
    99+
    2023-09-01
    php ios 智能手机 开发语言 javascript
  • 如何通过js点击判断下载是ios还是安卓
    本篇内容介绍了“如何通过js点击判断下载是ios还是安卓”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!代码...
    99+
    2022-10-19
  • php如何判断是apache还是nginx
    今天小编给大家分享一下php如何判断是apache还是nginx的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。检测Apach...
    99+
    2023-07-06
  • linux如何判断分区是mbr还是gpt
    今天小编给大家分享一下linux如何判断分区是mbr还是gpt的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。判断方法:1、利...
    99+
    2023-07-02
  • linux如何判断是文件还是目录
    这篇文章主要为大家展示了“linux如何判断是文件还是目录”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“linux如何判断是文件还是目录”这篇文章吧。在linux中,可以利用“ls -l”命令判...
    99+
    2023-06-22
  • JavaScript如何判断正数还是负数
    本篇内容介绍了“JavaScript如何判断正数还是负数”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2022-10-19
  • php如何判断奇数还是偶数
    本篇内容主要讲解“php如何判断奇数还是偶数”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“php如何判断奇数还是偶数”吧!php判断奇数还是偶数的方法:1、新建一个php文件;2、定义一个变量;...
    99+
    2023-06-21
  • php如何判断移动端还是pc端
    这篇“php如何判断移动端还是pc端”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“php如何判断移动端还是pc端”文章吧。p...
    99+
    2023-07-04
  • vue-cli如何判断安装成功
    Vue-cli 是 Vue.js 当中的一款构建工具。它通过简化了项目搭建的流程,提供了一些工具和便利的操作,大大提高了开发效率。使用 Vue-cli 需要先安装,那么如何判断 Vue-cli 安装成功呢?Vue-cli 安装方法:在使用 ...
    99+
    2023-05-23
  • node中如何判断是文件还是文件夹
    这篇文章主要介绍node中如何判断是文件还是文件夹,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! 在node中,可以利用isFile()和isDirect...
    99+
    2022-10-19
  • linux如何判断网络是百兆还是千兆
    这篇文章主要介绍了linux如何判断网络是百兆还是千兆的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇linux如何判断网络是百兆还是千兆文章都会有所收获,下面我们一起来看看吧。在linux中,可以利用ethto...
    99+
    2023-06-30
  • php如何实现判断联通还是电信
    小编给大家分享一下php如何实现判断联通还是电信,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!php实现判断联通还是电信的方法:1、创建一个HTML页面并通过js代码验证手机号码是否正确;2、通过PHP代码“public ...
    99+
    2023-06-22
  • php如何判断字符串是中文还是英文
    php判断字符串是中文还是英文的方法:在php项目中自定义一个函数方法,通过“preg_match("/^[^\x80-\xff]...);”判断是否是英文以及“preg_match("/^[".chr(0&#...
    99+
    2022-10-19
  • php如何判断字符串是中文还是数字
    这篇文章主要讲解了“php如何判断字符串是中文还是数字”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“php如何判断字符串是中文还是数字”吧!php判断字符串是中文还是数字的方法:1、通过“i...
    99+
    2023-07-05
  • vue如何判断图片是竖图
    今天小编给大家分享一下vue如何判断图片是竖图的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。使用JavaScript的Ima...
    99+
    2023-07-05
  • 如何判断ORACLE启动时使用spfile还是pfile
    小编给大家分享一下如何判断ORACLE启动时使用spfile还是pfile,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! ...
    99+
    2022-10-18
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作