我们首先将下原理
研究发现微信的UA中一定带有MicroMessenger并且其他浏览器UA没有
所以我们检查UA如果有那么就让他有遮罩
那么遮罩怎么实现呢？我们在JavaScript中是不好让加上遮罩的
所以我们写一个在最上层的遮罩，用JavaScript让他沉下去

0x00分析UA

获取UA

let url = navigator.userAgent.toLowerCase();
//使用toLowerCase将字符串全部转为小写 方便我们判断使用

UA中如果有MicroMessenger

if (url.indexOf("micromessenger") > -1) {
//单独判断微信内置浏览器
}

UA中如果有iPhone|iPod|iPad|Mac

if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) { //判断是否是iOS

}

UA中如果有android

if (navigator.userAgent.match(/android/i)) { //判断是否是Android

}

如果都不是

else if(true){

}

完整的

let url = navigator.userAgent.toLowerCase();
//使用toLowerCase将字符串全部转为小写 方便我们判断使用
if (url.indexOf("micromessenger") > -1) {
  //单独判断微信内置浏览器
    if (navigator.userAgent.match(/(iPhone|iPod|iPad|Mac);?/i)) { //判断是否是iOS

    }
    if (navigator.userAgent.match(/android/i)) { //判断是否是Android

    }
}else if(true){

}

0x01 div遮罩

我们分别写iPhone和Android的div遮罩
Android

<div id="WeChatAndroid" style="position: absolute; width: 100%; height: 100000%; left: 0px; top: 0px; background: #434343;opacity: 0.9; filter: alpha(opacity=40);z-index:99999999999;">

</div>

iPhone

<div id="WeChatiPhone" style="position: absolute; width: 100%; height: 100000%; left: 0px; top: 0px; background: #434343;opacity: 0.9; filter: alpha(opacity=40);z-index:99999999999;">

</div>

里面内容自由发挥
我用的是
Android

<img style="width: 100%" src="https://zigao-oss.oss-accelerate.aliyuncs.com/web/blog.zigao.info/assets/uploads/image/wechat/android.png">

iPhone

<img style="width: 100%" src="https://zigao-oss.oss-accelerate.aliyuncs.com/web/blog.zigao.info/assets/uploads/image/wechat/iphone.png">

这两张图片我放出来


iPhone Android 

遮罩下沉

iPhone遮罩下沉

document.getElementById("WeChatiPhone").style.display='none';

Android遮罩下沉

document.getElementById("WeChatAndroid").style.display='none';

成品

如果是iPhone就让Android遮罩下沉
如果是Android就让iPhone遮罩下沉
如果都不是就让两个都下沉

所以最后是这样

<!--UA检测-->
<div id="WeChatiPhone" style="position: absolute; width: 100%; height: 100000%; left: 0px; top: 0px; background: #434343;opacity: 0.9; filter: alpha(opacity=40);z-index:99999999999;"><img style="width: 100%" src="https://zigao-oss.oss-accelerate.aliyuncs.com/web/blog.zigao.info/assets/uploads/image/wechat/iphone.png"></div>
<div id="WeChatAndroid" style="position: absolute; width: 100%; height: 100000%; left: 0px; top: 0px; background: #434343;opacity: 0.9; filter: alpha(opacity=40);z-index:99999999999;"><img style="width: 100%" src="https://zigao-oss.oss-accelerate.aliyuncs.com/web/blog.zigao.info/assets/uploads/image/wechat/android.png"></div>
<script>
let url = navigator.userAgent.toLowerCase();
//使用toLowerCase将字符串全部转为小写 方便我们判断使用
if (url.indexOf("micromessenger") > -1) {
  //单独判断微信内置浏览器
    if (navigator.userAgent.match(/(iPhone|iPod|iPad|Mac);?/i)) { //判断是否是iOS
        document.getElementById("WeChatAndroid").style.display='none';
    }
    if (navigator.userAgent.match(/android/i)) { //判断是否是Android
        document.getElementById("WeChatiPhone").style.display='none';
    }
}else if(true){
    document.getElementById("WeChatAndroid").style.display='none';
    document.getElementById("WeChatiPhone").style.display='none';
}
</script>

效果图



iPhone效果 Android效果