CSSのborder-radiusプロパティを%で指定すると、適用されない機種がある
公開日:
こんにちは。x-fit開発チームの山本です。
border-radiusは、いわゆる「角丸」をまとめて指定するためのCSSプロパティです。指定はpxなどの直接指定、または%での相対指定で行います。
border-radiusを%で指定した場合、適用されない現象が確認できたので、少し調べてみました。
【HTMLコード】
ブロック要素に対して、border-radiusをpx、%それぞれで指定し、実機で見た目を確認してみます。
コード例(抜粋)は以下のようなものです。
<style type="text/css"> .percent { width: 100px; height: 50px; border: solid 1px #000000; border-radius: 15% 15% 15% 15%/30% 30% 30% 30%; } .pixel { width: 100px; height: 50px; border: solid 1px #000000; border-radius: 15px 15px 15px 15px/15px 15px 15px 15px; } </style> <body> <p>border-radius % definition on canvas</p> <canvas class="percent"></canvas> <p>border-radius px definition on canvas</p> <canvas class="pixel"></canvas> </body>
【確認結果】
スクリーンショット
現象が発生する場合(IS03)
現象が発生しない場合(Galaxy Nexus)
機種名 | OS・Version | %指定が適用 されない現象が 発生するか |
---|---|---|
iPhone 4 | iOS 4.0 | 発生 |
iPhone 4S | iOS 5.0 | 発生しない |
Xperia | Android_1.6 | 発生※ |
IS04 | Android_2.1 | 発生 |
IS03 | Android_2.2 | 発生 |
Xperia arc | Android_2.3 | 発生 |
GALAXY NEXUS | Android_4.0 | 発生しない |
IS12T | Windows Phone 7.5 | 発生しない |
※Xperia(Android1.6)では、px指定も適用されませんでした。
【対応】
%指定を使わず、px指定を行うようにしましょう。
※本記事は、弊社開発チーム所有機での確認結果であり、全機種調査の結果ではありません。同一機種であっても、この現象が必ず発生することを保証するものではありません。これ以外や例外のある可能性がありますことをご了承ください。