• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

微信内置浏览器不能下载的问题以及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的可视高度,具体有没有效也没测试,反之加上也没啥不良反应.

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

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

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

0
  • 本文分类:vue 项目实战
  • 本文标签:暂无标签
  • 流行热度:已超过 211 人围观了本文
  • 最后更新:2019年12月10日 - 15时35分44秒
  • 发布日期:2019年12月10日 - 15时35分44秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
微信收款码
微信收款码