V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
ETONG
V2EX  ›  程序员

关于浏览器适配的特别情况,不知道怎么解决?怎么判断移动端的火狐浏览器呢

  •  
  •   ETONG · 2021-07-25 15:51:35 +08:00 · 1395 次点击
    这是一个创建于 977 天前的主题,其中的信息可能已经有所发展或是发生改变。

    目前火狐浏览器不支持 backdrop-filter 属性,这个属性是背景毛玻璃效果,并且现在主流浏览器中只有火狐不支持

    而且,这个毛玻璃效果的只用在了手机端上,有且仅有移动端火狐浏览器需要适配,工作量不大

    那我就想适配一下,我的思路是通过 js 判断浏览器内核,检测到火狐的时候,把 backdrop-filter 换成一张图片。

    于是神奇的一幕发生了

    我找了很多检测的代码,发现都无法使用,然后我惊奇的发现,当通过开发者工具调成手机端 iphoneX 的时候,内核就变成了苹果,这我也能理解,毕竟是模拟手机嘛,可是苹果是支持 backdrop-filter 属性的,为啥模拟苹果了还是不支持?现在的问题就是我如何知道访问的设备是移动端的火狐浏览器呢?

    在火狐浏览器里面通过开发者工具调成 iphoneX 的时候, 我通过: https://blog.csdn.net/tym3515/article/details/84754135 检测到是 iphone 然后通过 http://tools.jb51.net/aideddesign/browser_info 检测也是 iphone

    主要原因就是这些检测代码要么是检测内核 要么是检测设备类型 所以我现在该怎么办,要怎么适配这个有且仅有一个的移动设备上的火狐呢?

    7 条回复    2021-07-26 10:11:37 +08:00
    nieyujiang
        1
    nieyujiang  
       2021-07-25 16:00:29 +08:00 via iPhone
    iOS 浏览器只能使用 Safari 内核
    oott123
        2
    oott123  
       2021-07-25 16:00:40 +08:00 via Android
    调成安卓,因为苹果上的火狐也支持
    ETONG
        3
    ETONG  
    OP
       2021-07-25 16:03:04 +08:00
    @oott123 谢谢大佬
    ETONG
        4
    ETONG  
    OP
       2021-07-25 16:22:06 +08:00
    @oott123 测试了 Android 确实可以 但是 ios 不行
    aristolochic
        5
    aristolochic  
       2021-07-25 19:09:02 +08:00
    如果能用 CSS 实现替换图片的话,直接用 @supports not ((-webkit-backdrop-filter: blur(1em)) or (backdrop-filter: blur(1em)))查询不就完事了(里面写 fallback 的样式),需要在 JavaScript 替换也有 CSS.supports('属性', '值'),干嘛非得关心具体浏览器?等哪天移动端火狐又支持了,难道你还要为了这个再提交一个新版本?

    另外我一般做 backdrop-filter 的 fallback 只是降低透明度而已。如果有文本阅读需要还会将下层内容隐藏。能够使用静态图片替换的场景,用 filter 就行了,这个哪儿都支持。
    ETONG
        6
    ETONG  
    OP
       2021-07-25 20:16:27 +08:00
    @aristolochic 谢谢
    runze
        7
    runze  
       2021-07-26 10:11:37 +08:00
    用火狐模拟 iPhone,只是把分辨率、UA 等属性伪装一下,本质还是火狐。

    不过楼主要兼容移动端火狐,用火狐模拟 iPhone 干嘛?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2700 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 15:36 · PVG 23:36 · LAX 08:36 · JFK 11:36
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.