Androidブラウザでborder-radiusを改善するための回避策はありますか？
私はこの議論についてさらに質問を見つけたり、「今のところ不可能」な答えだけを見つけたりして検索したので、共有したい簡単な解決策を思いつきました。
質問する
1285 次
1 に答える
4
アンドロイドブラウザで境界線の半径をより滑らかに見せるためにいくつかのトリックが必要だったので、このシンプルで効果的なソリューションを思いつきました。以下に示すように、ボックスシャドウをcssクラスに追加しました。
-webkit-box-shadow: 0 0 1px #000;
シャドウのx位置とy位置は0であるため、シャドウは中央に配置されます。必要なのは、ブラー値を調整して、コーナーエッジからわずか1px（必要に応じて）上に拡張して、より滑らかに見えるようにすることです。もちろん、影の色は、丸みを帯びた要素の背景/境界線の色と同じである必要があります…</ p>
このコード行をcssに追加するだけで、小さな問題が発生します。はい…すべての-webkitブラウザーを対象とし、border-radiusの外観を（わずかに）シャープにしません。
さて、あなたが小さな妥協を使うことができるタイプのデザイナーなら、それはあなたのためにこのようにうまくいくはずです、しかしあなたが私のような気まぐれなフリークなら、あなたは絶対にあなたのCSSを特定のデバイスに向ける方法を見つけるべきです。
これを書いている時点では、まだ完璧な解決策は考えていませんでしたが、「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 */
}
みなさん、よろしくお願いします。私がいくつかの絶望的なアンドロイドボーダー半径に取りつかれたデザイナーを助けたことを願っています;）
于 2012-08-22T17:22:58.420 に答える