这是一个创建于 1224 天前的主题，其中的信息可能已经有所发展或是发生改变。
目前火狐浏览器不支持 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
主要原因就是这些检测代码要么是检测内核 要么是检测设备类型 所以我现在该怎么办，要怎么适配这个有且仅有一个的移动设备上的火狐呢？
 |
1
nieyujiang 2021-07-25 16:00:29 +08:00 via iPhone
iOS 浏览器只能使用 Safari 内核
|
 |
2
oott123 2021-07-25 16:00:40 +08:00 via Android
调成安卓，因为苹果上的火狐也支持
|
 |
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 就行了，这个哪儿都支持。 |
 |
6
ETONG OP @aristolochic 谢谢
|
 |
7
runze 2021-07-26 10:11:37 +08:00
用火狐模拟 iPhone，只是把分辨率、UA 等属性伪装一下，本质还是火狐。
不过楼主要兼容移动端火狐，用火狐模拟 iPhone 干嘛？ |
Select Language