为什么 CSS 边框在 Android 上看起来不同? [英] Why does a CSS border look different on Android?

问题描述

我有一个带边框的盒子.

I have a box with a border.

border: 1px solid #000;

我正在使用以下视口设置:

I am using the following viewport setup:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />

边框似乎是顶部和右侧的 2 个像素.这是什么原因?

The border seems to be 2 pixels on the top and right side. What is the reason for this?

附加:除了宽度和高度之外，没有其他 CSS 规则.

Additional: there are no other CSS rules other than a width and height.

推荐答案

专门针对像素密度的元标记已经贬值，现在 Android 和 iPhone 似乎都只使用一个元标记:

The meta tag that targeted pixel-density specifically has been depreciated and now both Android and iPhone seem to be just using the one metatag:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

但是，如果你尝试制作一个 1px 的边框，它会根据移动设备的像素密度在不同的边上变得越来越厚.

But, if you try to make a 1px border, it will be thicker and thinner on different sides depending on the mobile device's pixel density.

某些设备如何使用多个像素呈现1px"，这并不总是很漂亮，因为它们使用不同的像素比 (dpr)，例如 1.5、2 和 3.有时，1px 边框的所有 4 个边都不匹配.

How some devices render '1px' with multiple pixels and it is not always pretty because they are using different pixel ratios (dpr) such as 1.5, 2 and 3. Sometimes, all 4 sides of a 1px border will not match.

这是一些 CSS，通过将 1px 除以一半，使 1px 在 2dpr iPhone 上正确显示:

This is some CSS to make 1px display properly on 2dpr iPhone by dividing 1px by half:

@media only screen and (-webkit-min-device-pixel-ratio: 2) {

div {

border-width: 0.5px;

}

这里展示了类似的技术:http://n12v.com/css-retina-and-physical-pixels/https://developer.android.com/guide/webapps/targeting.html

And similar techniques are shown here: http://n12v.com/css-retina-and-physical-pixels/ https://developer.android.com/guide/webapps/targeting.html

这篇关于为什么 CSS 边框在 Android 上看起来不同?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！