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

问题描述

我有一个带有边框的框。

  border：1px solid＃000; 
  

我使用下面的视口设置：

 < meta name =viewportcontent =width = device-width，initial-scale = 1，user-scalable = no/> 
  

边框的顶部和右侧似乎为2像素。
这是什么原因？

---

其他：除了宽度和高度以外，没有其他的CSS规则。

解决方案

专门针对像素密度的元标记已被折旧，现在Android和iPhone似乎都只使用一个元标记：

 < meta name =viewportcontent =width = device-width，initial-scale = 1.0> 
  

但是，如果您尝试制作1px边框，则它会在不同侧面变得更厚更薄移动设备的像素密度。

一些设备如何渲染具有多个像素的'1px'，并且它并不总是很漂亮，因为它们使用不同的像素比率（dpr），例如1.5，2和3.有时，1px边框的所有4边不匹配。

这是一些CSS，可以在2dpr iPhone上正确显示1px，一半：

  @media唯一屏幕和（-webkit-min-device-pixel-ratio：2）{
 
 div {
 
 border-width：0.5px; 
 
 
 
 
 
 
 
类似的技术如下所示：
 < a href =http://n12v.com/css-retina-and-physical-pixels/ =noreferrer> http://n12v.com/css-retina-and-physical-pixels/  
  https://developer.android.com/guide/webapps/targeting。 HTML  
 
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" />
The border seems to be 2 pixels on the top and right side. 
What is the reason for this?





Additional: there are no other CSS rules other than a width and height.
解决方案
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">
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.

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.

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;

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

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