问题描述
我有一个带边框的盒子.
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 上看起来不同?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！