3

iPhone 4 などのディスプレイのデザイン コンセプトに 1px の境界線が含まれているという問題に出くわしましたが、Retina デバイスがアスペクト比 2x の CSS を測定していることを知りませんでした。

そこで、max-device-width:640px(ポートレート用の) メディア クエリを利用してページのデザインを開始し、ビューポート メタinitial-scale=.5を

問題は、iPhone の実ピクセル寸法でメディア クエリを設定および定義したくない場合initial-scale=.5、Retina ディスプレイで 1 ピクセル幅の境界線などを実現する方法がないように思われることです。border:.5pxそれの整数値 - 1 ではなく 0 になるようです。

4

2 に答える 2

4

これは、iPhoneで1pxの境界線を達成した方法です（iPhone 5でテスト済み）。

HTML
<span class="hr"></span>

CSS
.hr {
    display: block;
    width: 100%;
    border-bottom: 1px solid black;
    -webkit-transform: scaleY(0.1);
}

明らかに、これにより、実際にコンテナーとして機能するものに 1 ピクセルの境界線を適用するのが難しくなりますが、真の 1 ピクセルの区切り記号に対してはうまくいきます。

于 2013-12-10T05:07:36.290 に答える