前端常见兼容问题系列5:¥符号在部分Android APP的WebView中不见了

问题再现

¥符号在涉及到售卖的页面再常见不过了。但是,测试中居然发现,华为荣耀6 plus(系统4.4.2)上,某APP中该符号不见了,所有用到该符号的地方均成了空白(如图1所示)。

前端常见兼容问题系列5:¥符号在部分Android APP的WebView中不见了
(图1)

而实际上,我所期望的效果如图2所示:
前端常见兼容问题系列5:¥符号在部分Android APP的WebView中不见了
(图2)

分析过程

莫非是编码不对?首先,来看一下我是怎么实现¥这个符号的——用的是CSS,形如

.price:before{
        content:'\A5';
        display:block;
        font-size:12px;
}

的伪元素。

发现这个问题之后,我尝试把它直接写在html中,或者&yen; &#165; &#xa5; &#165; &#xA5; 等都试验了一番,全部都不能显示。网络检索到有人说把它改成全角的¥,即(FFE5),还是不行。然道说我碰到“天坑”了。但这时,我就相信一条:有bug必有原因!于是又复查了一遍源代码,发现<html>标签上设置了lang="zh-cmn-Hans" ,我试着把它改成了lang="en" ,问题居然就这么解决了。

但是,字符虽然出来了,显示出来的却始终是Ұ的形状,而非¥,即少了一横。我突然想起来刚才反复试验的时候把content:'\A5';改成了content:'\FFE5';,于是恢复了一下,才最终大功告成。

不过,因为原有的页面是在<html>标签上设置了lang="zh-cmn-Hans" ,如果我们需要在保留它的前提下怎么解决这个bug呢?

结论

影响面比较小的办法是:可以只针对使用了半角的¥的容器标签添加lang="en"属性,如<span class="price" lang="en">&#165;</span>

另外,有网友介绍华为P7 ,小米3也都存在该问题,看来不只是个例。考虑到其对视觉展现和语义表达的影响非常明显,因而值得特别留意重视。

上一篇:前端常见兼容问题系列3:永远置于顶层的video


下一篇:在安卓上运行TensorFlow:让深度学习进入移动端