开发者

Android WebView border-radius aliasing

开发者 https://www.devze.com 2023-02-28 20:06 出处:网络
When using border-radius on my android emulator I am seeing ugliness like this: ugly border radius http://beautifulpixel.com/assets/5554_FastAndSmall-20100726-130326.png

When using border-radius on my android emulator I am seeing ugliness like this:

ugly border radius http://beautifulpixel.com/assets/5554_FastAndSmall-20100726-130326.png

Is there anyway to get Android to display rounded corners v开发者_JAVA技巧ia -webkit-border-radius in a more pleasing way? Most modern desktop browsers and Mobile Safari seem to antialias their corners, but not Android's renderer.

I'm really hoping I don't have to do this with images, and there is some awesome trick to get pretty corners with only a border radius css declaration.


I indeed absolutely needed too some trick to make the border-radius look smoother on the android browser so I come up with this simple yet effective solution. I just added box-shadow as shown below to my css class:

-webkit-box-shadow: 0 0 1px #000;

There is a small issue just adding this line of code to your css: yes… it will target all -webkit browsers, making the border-radius look ( slightly ) less sharper.

At the time I’m writing this I didn’t thinked yet at the perfect solution, but you can make good use of media queries limiting the rule wether you use the ‘max-width’ property (to limit the range of devices based on their screen width at least spearing webkit desktop browsers) or the ‘-webkit-device-pixel-ratio’ to target the different android devices based on their pixel density:

@media only screen and (-webkit-device-pixel-ratio:.75){
/*for low density (ldpi) Android layouts */
}

@media only screen and (-webkit-device-pixel-ratio:1){
/*for low density (ldpi) Android layouts */
}

@media only screen and (-webkit-device-pixel-ratio:1.5){
/*for low density (ldpi) Android layouts */
}

Best regard and good designing to everybody. Hope I helped some desperate android border-radius obsessed designer like me too ;)


There is no imageless solution to this in the curent Android release, sadly.


For just displaying a circle, using a transform along with -webkit-backface-visibility: hidden; as per this answer could help (although transforms are expensive on low end Android devices).

0

精彩评论

暂无评论...
验证码 换一张
取 消