微信内置浏览器不能下载的问题以及ios衍生出来的问题

我今天才知道,微信内置的浏览器无法点击下载链接下载文件的,虽然有一些办法,但是最简单粗暴的就是提示用浏览器打开即可.

微信端要求1

1. ios最好只用safari浏览器打开
2. 安卓用浏览器打开即可

解决办法就直接判断,如果是ios就提示用safari,安卓就用其他浏览器打开,直接做ua判断即可!

let ua = navigator.userAgent;

if(isEquipment(ua) === "ios"){
//ios提示
}else if(isEquipment(ua) === "android")){
//安卓提示
}

//判断是安卓还是ios
function isEquipment(ua) {
    if (/(iPhone|iPad|iPod|iOS|Mac)/ig.test(ua)) {
        return "ios";
    } else if (/(Android)/ig.test(ua)) {
        return "android";
    };
};

因为ipad在safari中ua是不会有ipad字段的,但是有Mac OS 这种字段,于是只能判断这个了,加上我这个只是适配移动端的,他电脑端mac怎么操作就不用管了,所以直接在正则里加上Mac判断.

这里,平台判断完毕,但是适配时出现了一个奇葩问题,听我慢慢道来.

其他要求2

1. ios端在其他浏览器的时候要提示用safari打开

于是也要判断ua,判断是不是safari浏览器,这里就会有一个奇葩的问题,ipad的QQ浏览器用的是safari的内核,导致safari的ua判断不能唯一了,不能使用传统的/Safari/.test(ua) && !/Chrome/.test(ua),这样判断qq浏览器也会被判断为safari,所以需要再加一个判断,如果是iPad的情况下,判断他有没有safari独有的字段.

在ipad中,我们的safari浏览器ua会有一个Macintosh的字符,我们就拿这个作为判断依据,如果没有这个字符,表示这是一个ipad端的非safari浏览器,otherBrowser为turn,返回值的时候进行求反,如果是其他浏览器,就让函数返回false,判断为不是safari浏览器,然后再根据这个布尔值做提示操作.

//判断是不是safari浏览器
function isSafari(ua) {
    let Safarikernel = false;
    let otherBrowser = false;
    if (/Safari/.test(ua) && !/Chrome/.test(ua)) {
        //是否是Safari内核
        Safarikernel = true;
    };
    if (/iPad/ig.test(ua) && !/Macintosh/ig.test(ua)) {
        //ipad的QQ浏览器也是safari内核,多加一个判断
        otherBrowser = true;
    };
    return Safarikernel && !otherBrowser;
}

其他小知识

由于提示的时候需要做一个遮罩层,这个遮罩层由我们的css控制,但是在ios中高度可能会有问题,这里就采用了网上的兼容办法:

var winHeight = typeof window.innerHeight != 'undefined' ? window.innerHeight : document.documentElement.clientHeight;

我们获取视窗的高度,如果window.innerHeight存在,就用window.innerHeight,反之用html的可视高度,具体有没有效也没测试,反之加上也没啥不良反应.

一上就是前端小知识,随着设备升级变化,这样的方式也不知道会不会生效,使用时注意.

顺便提供三张图片提示的素材,以备以后用到.