About the solution to the 1px border in the mobile H5 page

The content shared with you in this article is about the solution to the 1px border in the mobile H5 page. The content is of great reference value. I hope it can help friends in need.

Question

This is an old question. When I first noticed it, it was the UI designer who came to trouble me. Emmm, I just entered the front-end workplace at that time. , I don’t understand anything, ah ah ah ah, the situation is like this:
The designer came over with his mobile phone: These borders are thick, my design draft is 1px
Me:? ? ? ? What I wrote is 1px. If you don’t believe it, take a look. (Speaking, I took out the css code
Designer: That’s not right. To my eyes, the border looks much thicker than the one on my design draft. It looks weird. (emmm, it’s indeed pixelated.
Me: Then I’ll change it to Take a look at 0.5px (while talking, he changed the code
The designer took a look and nodded, it was indeed much better.
Later it was discovered that the same code was problematic on some Android machines, which would cause 0.5px The line is invisible.
It’s strange. Obviously changing it to 0.5px does not solve the problem, but it is true that the 1px border looks much thicker than the design draft. What is the reason?

Performance of the 1px border

I directly use css to set the 1px border,
html:

  
• 1
  
• 2

css:

    * {
      margin: 0;
      padding: 0;
    }
    ul, li{
      list-style: none;
    }
    .hairlines {
      width: 300px;
      margin: 100px auto;
    }
    .hairlines li{
      position: relative;
      margin-top: 10px;
      border-bottom: 1px solid #cccccc; // 边框设置成1px
    }

The screenshot obtained is as follows:

It looks much thicker than the design draft. The design draft should look like this. You can compare it:

Solution 1: Pseudo-class transform

With the mentality of solving the problem, although I didn’t think clearly about the reason at the time, I still found relevant solutions, some of which mentioned By using border-image or box-shadow, you can also simulate the desired 1px border effect, but I personally think it is not universal and not a conventional solution.
The final choice is to use the pseudo-class transform method:The principle is to remove the border of the original element, then use :before or :after to redo the border, and reduce the scale of the transform by half. The original element is relatively positioned, and the new border is positioned absolutely.
html Same as above
css is as follows:

    * {
      margin: 0;
      padding: 0;
    }
    ul, li{
      list-style: none;
    }
    .hairlines {
      width: 300px;
      margin: 100px auto;
    }
    .hairlines li{
      position: relative;
      border:none;
      margin-top: 10px;
    }
    .hairlines li:after{
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      background: #cccccc;
      width: 100%;
      height: 1px;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
    }

In this case, the lines drawn are indeed much thinner. I generally used the above method to solve the 1px border problem for a year, but with After using it, I found several questions:
1. Why is scaleY(0.5)? How is this 0.5 obtained? Do all models require the scale to be reduced to half, in other words, is it universal?
2. What if I want to draw four borders of a container at the same time?
3. Does it support rounded borders?
For the last two questions, if you modify the above code, you can find a solution (for For the convenience of viewing the effect, I put the effect obtained by normal writing and the effect obtained by using pseudo-class together, so that it is easier to see the difference):

nbsp;html>


  
  
  
  


粗线

  
• 1
  
• 2

  
• 3
  
• 4

The effect diagram obtained in this way is as follows:

下面的边框明显细很多，更贴近于设计稿。
那么“1.为什么是scaleY(0.5)？这个0.5是怎么得出的？是不是所有机型都是要scale缩小到一半，换句话说是不是通用？”这个问题该怎么回答呢？
这就要回到问题的本质，为什么我明明在css里面写了1px，但是仍然会出现“看起来比平时要粗很多的效果”？
查了资料看了下，原来css中设置的像素并不是跟设备的像素点一一对应，这就是说，我在css中写明1px，实际在手机上，看到的有可能并不是一个像素点占据的宽度。
css的像素是一个抽象的相对的概念，在不同的设备和环境中，所表示的物理像素点是不一样的，在比较老的设备上，屏幕像素密度比较低，这样，确实一个1px的像素就是一个物理像素，但是技术飞速发展，现在的手机屏幕都是高分辨率，在尺寸未变化的情况下，一个屏幕上将充满着更多的像素点，这时一个css的像素(通常称为逻辑像素)将对应多个物理像素点。
那到底一个css的像素宽度上对应多少个物理像素点呢？
这就要提到devicePixelRatio（设备像素比）
devicePixelRatio = 设备上物理像素/独立像素，可以通过window.devicePixelRatio获取，这个像素比恰好可以描述一个css的像素宽度上对应多少个物理像素点，其实就是对应devicePixelRatio个像素点。
当viewport的属性initial-scale为1时，页面大小正常，但initial-scale为0.5时，页面被缩小了1倍，devicePixelRatio为2的设备本来1个CSS像素宽度占2个物理像素宽度，缩小后的1个CSS像素宽度就只占1个物理像素，即实现了真正的1物理像素。

解决方法二：rem + viewport

说到这里，解决方法就很明了了：我们可以在运行的时候拿到设备的devicePixelRatio，动态改变viewport的initial-scale为 1/devicePixelRatio，这样就能保证1px的宽度就是真正的1物理像素宽。其他适配使用rem（因为使用px的话都会被缩小）
代码如下：

nbsp;html>


  
  
  
  
  

  
• 1
  
• 2

得到的效果可以看下图(手机上看更明显一些)：

从上来看，回到之前的问题，"1.为什么是scaleY(0.5)？这个0.5是怎么得出的？是不是所有机型都是要scale缩小到一半，换句话说是不是通用？"其实并不一定是0.5,在dpr为3的设备上其实应该是0.3333……，也不通用，因为每个手机的dpr可能不一样，但是方法一中的0.5一般因为至少比1px细，所以也差不多可以满足设计师的要求了。

相关推荐：

HTML5中新增的标签和属性的总结

js和HTML5基于过滤器从摄像头中捕获视频的方法

The above is the detailed content of About the solution to the 1px border in the mobile H5 page. For more information, please follow other related articles on the PHP Chinese website!