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%縮小。
これで、細くなります。

上から、
1pxで指定した実線
1pxで指定し、50％縮小した実線
同、点線、破線
（Retina原寸）

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

Category　：　CSS