0%

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

发布于 / 分类: vue 项目实战 / 暂无评论 / 阅读量 136

最后更新于 2019年12月10日

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

微信端要求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的可视高度,具体有没有效也没测试,反之加上也没啥不良反应.

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

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

请输入图片描述
请输入图片描述
请输入图片描述

安装vue-cli遇到的问题总汇 处理谷歌浏览器总是提示无法阻止事件的报错
  • 滑动验证
    »
  • weixiao kaixin tushetou jingkong deyi fanu liezui liuhan daku ganga bishi nanguo lihai qian yiwen numu tu yi haixiu se fadai minyan hehe henkaixin huaji biyiyan kuanghan maimeng shui xiaku penqi zhangzui pen aini ye niu laji ok chigua renshi kongbu shuai xiaoxiese touxiao huaixiao jingnu chihuai kaisang xiaoku koubi zhuangbi lianhong kanbujian shafa zhijing xiangjiao dabian yaowan redjing lazhu rizhi duocang chixigua hejiu xixi xiaopen goukun xiaobuchu shenme wusuowei guancha lajing chouyan xiaochi bie zhadanzui zhadanxiao