Android webview中的页面出现的部分Bug及解决方案

{app.params.name}} {app.params.name}} {app.params.name}}

写移动页面时给一个图片添加样式如下

img{
  border: .05rem solid #5c0008;
  border-radius: 1rem;
}

在IOS上正常,部分安卓的手机却不能正常显示(例如vivo手机),查阅了资料后发现在安卓低版本的手机上border-radius这个css 属性确实存在该问题以及发现一些其他的问题,特此记下!


一、Android2.3 自带浏览器不支持%


通常我们实现一个圆只需要border-radius:50%就可以了,但是在Android2.3中是不支持百分比的,要兼容的话我们只能使用一个较大值例如border-radius:999px;


二、Android及Safari低版本img的圆角问题(就是本文开头提到的问题)


当img元素有border时设置border-radius会导致圆角变形(如图)

border-radius在Android低版本的bug


解决办法就是在外面嵌套一个父元素然后设置其border和border-radius即可解决。


三、android 4.2.x背景色溢出和不支持border-radius 缩写


在Android4.2.x系统自带浏览器中,同时设置了border-radius和背景色的时候,背景色会溢出到圆角外,需要使用background-clip:padding-box;来修复。


android 4.2.x不支持border-radius 缩写解决办法就是使用border-radius的四个扩写属性,缩写属性放在后面。如下(自己借了几个手机并没发现这个问题)

.s{
  border-top-left-radius: 999px;  
  border-top-right-radius: 999px;  
  border- bottom-right-radius: 999px;  
  border-bottom-left-radius: 999px;  
  border-radius: 999px;
}



版权声明

durban 创作并维护的 Gowhich 博客采用 创作共用保留署名-非商业-禁止演绎4.0国际许可证。

本文首发于 Gowhich 博客( https://www.gowhich.com ),版权所有,侵权必究。

本文永久链接: https://www.gowhich.com/blog/743

comments powered by Disqus