Android WebView псевдоним границы

Question

Когда используешь border-radius на моем эмуляторе Android я вижу уродство, как это:

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

Есть ли способ заставить Android отображать закругленные углы через -webkit-border-radius более приятным способом? Большинство современных настольных браузеров и Mobile Safari, кажется, сглаживают свои углы, но не рендерер Android.

Я действительно надеюсь, что мне не нужно делать это с изображениями, и есть несколько удивительных трюков, чтобы получить красивые углы только с объявлением css радиуса границы.

Answer 1

К сожалению, в текущем выпуске Android нет безошибочного решения.

Answer 2

Я действительно абсолютно нуждался в какой-то хитрости, чтобы радиус границы выглядел более плавно в браузере Android, поэтому я пришел к этому простому, но эффективному решению. Я просто добавил box-shadow, как показано ниже, в мой класс CSS:

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

Есть небольшая проблема, просто добавив эту строку кода в ваш css: да... он будет нацелен на все браузеры -webkit, делая внешний вид границы-радиуса (немного) менее резким.

В то время, когда я писал это, я еще не думал об идеальном решении, но вы можете эффективно использовать медиазапросы, ограничивая правило, если вы используете свойство 'max-width' (чтобы ограничить диапазон устройств на основе их ширина экрана, по крайней мере, для браузера настольных компьютеров WebKit) или "-webkit-device-pixel-ratio" для нацеливания на разные устройства Android в зависимости от их плотности пикселей:

@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 */
}

С уважением и хорошим дизайном для всех. Надеюсь, что я помогал отчаянному одержимому дизайнеру андроида с радиусом границы, как я;)

Answer 3

Для отображения круга, используя преобразование вместе с -webkit-backface-visibility: hidden; Согласно этому ответу может помочь (хотя преобразования на дорогих устройствах Android стоят дорого).