很早之前我就发现,本博客的英文版的logo在安卓版Chrome浏览器上无法显示,但是在手机自带的浏览器上可以显示。我以为可能是一个偶发的问题,比如网络问题,缓存问题等,所以一直没有处理。

一直到今天,我对之前的看法产生了怀疑,因为这么长时间以来,每次在安卓版Chrome浏览器上访问这个博客,英文版的logo非常稳定地不能显示,这就不能用偶发来解释了。我决定花点时间解决这个问题。
首先,我在各种浏览器上测试了这个问题,多次测试结果非常一致,不存在不稳定问题。
- 安卓版Chrome浏览器:logo无法显示
- 安卓版Firefox浏览器:logo无法显示
- Vivo浏览器(手机自带浏览器):logo可以显示
- Ubuntu Chrome浏览器:logo可以显示
- Ubuntu Firefox浏览器:logo可以显示
根据以上测试结果,可以知道这个问题和特定浏览器相关。
会不会是浏览器的软件bug呢?我把安卓版Chrome浏览器更新到最新版本后重新测试,logo依然无法显示。
会不会是因为安卓版Chrome浏览器不支持logo的图片格式呢?logo使用了webp格式,这种格式比较新,部分浏览器可能不支持。但这个推测很快就被否定了,因为博客上其他webp格式的图片能正常显示。
虽然我认为不大可能是浏览器缓存的问题,但是网上一大堆分析都建议清空缓存试一试,我还是照做了。结果是,清空缓存后,logo依然无法显示。
在我无计可施的时候,我想到了谷歌的PageSpeed Insights工具。我使用PageSpeed Insights工具的手机模式测试了英文版博客的首页,惊喜地发现PageSpeed Insights工具上的logo也无法显示,并且工具还给出了logo无法显示的原因: 页面使用了https协议,但是图片使用了http协议,出于安全原因,图片被浏览器block了。

原因终于找到了,接下来就是修复这个问题。
本博客使用了wordpress的Astra主题,这个logo的网址是在wordpress后台设置的,且只能使用图片的默认网址,无法直接手动修改图片网址。图片的默认网址会使用WP_HOME 和 WP_SITEURL指定的网址来拼装,要想修改图片默认网址的协议,需要修改WP_HOME 和 WP_SITEURL网址的协议。如果Wordpress没有启用多站点,这个问题非常容易解决。但是不幸的是,我的博客启用了多站点,想修改主站点的WP_HOME 和 WP_SITEURL配置项,就麻烦一些了。好在经过多次尝试,这个问题终于解决,详见另外一篇文章:如何正确修改WordPress多站点的主站点地址?
修复后,首页在安卓版Chrome浏览器上的显示效果如下:

事情到此本可以结束了,但是当我回过头来总结的时候,又发现一个问题:修复前,logo对应的图片不能正常显示,但是为什么文章中的其他图片能正常显示呢?后续有时间的话,可以研究一下这个问题。