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

[ETONG]

目前火狐浏览器不支持 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

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

[nieyujiang]

iOS 浏览器只能使用 Safari 内核

[oott123]

调成安卓，因为苹果上的火狐也支持

[ETONG]

@oott123 谢谢大佬

[ETONG]

@oott123 测试了 Android 确实可以 但是 ios 不行

[aristolochic]

如果能用 CSS 实现替换图片的话，直接用 @supports not ((-webkit-backdrop-filter: blur(1em)) or (backdrop-filter: blur(1em)))查询不就完事了（里面写 fallback 的样式），需要在 JavaScript 替换也有 CSS.supports('属性', '值')，干嘛非得关心具体浏览器？等哪天移动端火狐又支持了，难道你还要为了这个再提交一个新版本？

另外我一般做 backdrop-filter 的 fallback 只是降低透明度而已。如果有文本阅读需要还会将下层内容隐藏。能够使用静态图片替换的场景，用 filter 就行了，这个哪儿都支持。

[ETONG]

@aristolochic 谢谢

[runze]

用火狐模拟 iPhone，只是把分辨率、UA 等属性伪装一下，本质还是火狐。

不过楼主要兼容移动端火狐，用火狐模拟 iPhone 干嘛？