前言

现在有一个需求，通过公众号或者链接，下载app应用，大家都知道，安卓和ios下载对应的版本都不一样。并且，ios 微信浏览器不支持应用下载，需要实现一个遮罩功能，提示用户通过浏览器下载，效果如下：

原理

我们先说下实现原理。这个遮罩功能，只允许在一个场景内实现，就是IOS微信浏览器内部。那怎么判断用户是否是IOS微信浏览器访问的呢？

研究发现微信的UA中一定带有MicroMessenger。并且其他浏览器UA中没有，这时候就可以利用MicroMessenger 来判断。代码片段如下：

<script>var ua = navigator.userAgent.toLowerCase();if (ua.match(/MicroMessenger/i) == "micromessenger") {return true;} else {return false;}
</script>

IOS场景判断：

ios 场景又分两种，IOS微信浏览器和非微信浏览器，代码片段如下：

<script>if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {$(window).on("load", function () {var winHeight = $(window).height();function is_weixin() {var ua = navigator.userAgent.toLowerCase();if (ua.match(/MicroMessenger/i) == "micromessenger") {return true;} else {return false;}}var isWeixin = is_weixin();//微信浏览器打开遮罩if (isWeixin) {$(".weixin-tip").css("height", winHeight);$(".weixin-tip").show();} else {//非微信浏览器，直接访问下载链接window.location.href = "IOS对应的下载链接";}})}
</script>

安卓场景：

<script>if (/(Android)/i.test(navigator.userAgent)) {window.location.href = "安卓对应的下载链接";}
</script>

PC mac 场景：

<script>if (/(mac os x)/i.test(navigator.userAgent)) {window.location.href = "IOS对应的下载链接";}
</script>

剩下的就是PC windows 场景了。

完整源码如下：

CSS：

<head><meta charset="UTF-8"><title>COMI下载</title><style>.weixin-tip {display: none;position: fixed;left: 0;top: 0;background: rgba(0, 0, 0, 0.8);filter: alpha(opacity=80);height: 100%;width: 100%;z-index: 100;}.weixin-tip p {text-align: center;margin-top: 10%;padding: 0 5%;}.img1 {width: 100%;height: 100%;filter: alpha(opacity=100);-moz-opacity: 0.4;-khtml-opacity: 0.5;opacity: 0.5;}</style>
</head>

Body：

<body><div class="weixin-tip"><img src="mobile_bg.jpg" class="img1"/></div>
</body>

JS：

<script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script><script typet="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>var u = navigator.userAgent;var isiOS = /iPad|iPhone|iPod/.test(navigator.userAgent); //ios终端if (isiOS) {$(window).on("load", function () {var winHeight = $(window).height();function is_weixin() {var ua = navigator.userAgent.toLowerCase();if (ua.match(/MicroMessenger/i) == "micromessenger") {return true;} else {return false;}}var isWeixin = is_weixin();if (isWeixin) {$(".weixin-tip").css("height", winHeight);$(".weixin-tip").show();} else {window.location.href = "IOS对应的下载链接";}})} else if (/(mac os x)/i.test(navigator.userAgent)) {window.location.href = "IOS对应的下载链接";} else if (/(Android)/i.test(navigator.userAgent)) {window.location.href = "安卓对应的下载链接";} else {window.location.href = "PC windows对应的下载链接";}</script>

最后给大家奉上原图，以供大家使用。

如有帮助，麻烦点赞收藏关注，感谢。

【前端】IOS微信浏览器点击右上角遮罩实现相关推荐

vue在微信里面的兼容问题_Vue在 iOS 微信浏览器下不能播放
问题的本质以上定位到问题大概花了我半小时时间,但是我并没有找到问题的根本原因,于是我翻阅了 Vue.js 2.5 的 release log,由于很长就不列了.Vue.js 每次升级主要分成 2 大 ...
IOS微信浏览器返回事件popstate监听
问题描述: 通过监听popstate事件,来判断是否点击返回按钮,比如从A页面跳转到B页面(监听popstate),然后再跳转到C页面,点击返回的按钮,测试成功,包括安卓版,但是问题来了,IOS版的微 ...
苹果微信html音乐播放,HTML5教程在iOS微信浏览器中如何自动播放HTML5 audio
本篇教程探讨了HTML5教程在iOS微信浏览器中如何自动播放HTML5 audio,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < html> Aut ...
popstate android4.3,IOS微信浏览器返回事件popstate监听会立即执行一次
页面跳转从a->b->b1->c,然后从c返回到b再到a.(监听popstate) IOS版的微信,是会立即触法popstate事件,导致直接从C页面跳转到A页面解决办法::: v ...
解决ios微信浏览器时间不兼容的问题
解决ios微信浏览器时间格式不兼容的问题由于ios在微信浏览器中无法识别"YYYY-MM-DD HH:MM:SS"格式的数据,所以在ios中页面将时间格式转换为"YYY ...
android 按钮点击返回顶部,微信浏览器点击系统返回，安卓返回会重载页面回到页面顶部，iOS则返回则会保留之前浏览位置的解决方法...
后续补我框好串端题近还架比作和和近还架比作和和充: 页面css设置了height: 100%,来避免使用fixed定位弹窗引起的部分机型兼容问题,因此会在返回的时候回到页面顶部,补充解决办法: 在弹窗 ...
微信播放在服务器视频无法播放音乐,【bug解决】ios微信浏览器中背景音乐无法播放...
我记得之前在一次项目中,出现过浏览报错: 所以在这次H5的制作中,我使用了iframe来加载音频文件,使用这种方式后,电脑端是没有问题的,但是当上传至服务器上在手机上浏览时,会出现点击音乐旋转按钮无法 ...
IOS微信浏览器返回事件监听问题
业务需求:从主页进入A订单页面,然后经过各种刷新或点标签加载后点左上角的返回直接返回到主页采取方法:采用onpopstate事件监听url改变,从而跳转到主页遇到的问题:安卓上测试没问题:苹果手机 ...
H5判断是否微信浏览器,并提示右上角打开默认浏览器
HTML内定义一个div,放"点击右上角从浏览器打开"图片 <style> .pop {width: 100%;height: 100%;position: fixed ...

【前端】IOS微信浏览器点击右上角遮罩实现

前言

原理

【前端】IOS微信浏览器点击右上角遮罩实现相关推荐

最新文章

热门文章