PAGE TOP

Retinaディスプレイで、1pxの線を引く方法

レティーナディスプレイ

言われるまで全く気づかなかったのですが、
スマートフォンサイトでiPhone4から採用されたRetinaディスプレイで、1pxの線を引きたい時、

border:1px solid #000

としても、1pxの線になっていないみたいなんです。

 

Pixel Device Ratioというデバイス・ピクセルとCSSピクセルの比率によって、iPhone4以降のRetinaディスプレイだと、1pxの線は2pxくらいの太さで見えてしまうようです。

 

ここを気にしている方はあまりいないのか、ググってもこれに言及している方が居ない・・・

 

 

そして試行錯誤の上実現できた荒業がこれです。

.border {
border-bottom:1px solid #000;
-webkit-transform: scaleY(0.5)
}

div入れ子にボーダーを指定、そしてそのdivをY方向に50%縮小。
これで、細くなります。

 

Retina Display Border Size

上から、
1pxで指定した実線
1pxで指定し、50%縮小した実線
同、点線、破線
(Retina原寸)

 

しかし、細い線のためにわざわざdivを一つ作らないといけないというのは、あまり美しくないな。
そのうち、webkit系ブラウザ仕様・解釈が変わるといいんですけど。


同じカテゴリのおすすめ記事

  • カテゴリー

  • 最近の投稿

  •