모바일 H5 페이지의 1px 테두리에 대한 해결 방법에 대해

이 글에서 공유한 내용은 모바일 H5 페이지의 1px 테두리에 대한 해결 방법에 관한 것입니다. 이 내용은 도움이 필요한 친구들에게 큰 도움이 되기를 바랍니다.

Question

오래된 질문이군요. 처음 눈치챘을 때, 저를 괴롭힌 건 UI 디자이너였습니다. 음, 제가 처음 들어왔을 때요. -작업 종료, 아무것도 이해하지 못했습니다. 상황은 다음과 같습니다.
디자이너가 휴대폰을 가지고 왔습니다. 이 테두리는 모두 두꺼워서 내 디자인 초안은 1px입니다.
I:? ? ? ? 제가 쓴 내용은 1px입니다. 믿기지 않으시면 한번 보세요. (말씀드리자면 CSS 코드
를 꺼냈습니다. 디자이너: 그게 아니네요. 제 눈에는 초안보다 테두리가 훨씬 두꺼워 보이는데요. 이상하게 보이네요. (으음, 역시 픽셀아이입니다
나: 그럼 넣을게요 0.5px로 바꿔서 보세요(말하다가 코드 바꿨어요
디자이너가 보시고 고개를 끄덕이셨는데 정말 많이 좋아졌네요.
나중에 찾아보니 일부 Android 시스템에서는 동일한 코드에 문제가 있습니다. 결과적으로 0.5px 선이 보이지 않습니다.
이상합니다. 분명히 0.5px로 변경해도 문제가 해결되지 않지만 1px 테두리가 훨씬 두꺼워 보입니다. 디자인 초안보다 이유가 뭔가요? #1px 테두리의 성능

1px 테두리를 CSS로 직접 설정하는데요,

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
    }

get 스크린샷은 다음과 같습니다.

디자인 초안보다 훨씬 두꺼워 보입니다. 다음과 같아야 합니다. 모두 비교할 수 있습니다.

해결책 1: 의사 클래스 + 변형# 🎜🎜#Embrace 문제를 해결하겠다는 마음으로 당시에는 이유를 명확히 생각하지 못했지만 여전히 관련 솔루션을 찾았습니다. 테두리 이미지 또는 상자 그림자를 사용하여 시뮬레이션할 수도 있습니다. 원하는 1px 테두리 효과가 있지만 개인적으로는 보편적이지 않고 기존의 솔루션도 아니라고 생각합니다.

최종 선택은 의사 클래스 + 변환 방법을 사용하는 것입니다.

원칙은 제거하는 것입니다. 원본 요소의 테두리를 사용하고 다음을 사용합니다. 이전 또는: 테두리를 다시 실행하고 변환 크기를 절반으로 줄인 후 원본 요소는 상대적으로 배치되고 새 테두리는 절대적으로 배치됩니다. #이 경우 그려집니다. 줄이 훨씬 얇아졌네요. 보통 1px 테두리 문제를 해결하기 위해 위의 방법을 사용했는데, 사용하고 나니 몇 가지 문제가 발견되었습니다. #🎜 🎜#1. scaleY(0.5)는 어떻게 얻나요? 0.5로 축소해야 하나요? 즉, 범용인가요?

2. 컨테이너의 4개 테두리를 어떻게 처리해야 하나요? #3. 둥근 모서리를 지원하나요?

위 코드를 수정하면 해결 방법을 찾을 수 있습니다. (효과를 보기 쉽게 하기 위해 일반적인 방식으로 작성하겠습니다.) 얻은 효과는 유사 클래스를 사용하여 얻은 효과, 차이를 더 쉽게 볼 수 있음):

    * {
      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;
    }

이 방법으로 얻은 효과 다이어그램은 다음과 같습니다.
#🎜 🎜 #

下面的边框明显细很多，更贴近于设计稿。
那么“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>


  <meta>
  <!--<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, width=device-width">-->
  <title>移动端1px边框问题</title>
  <script>
    (function () {
      var clientWidth = window.screen.width;
      var dpr = window.devicePixelRatio;
      var vp = document.createElement(&#39;meta&#39;);
      document.documentElement.style.fontSize = clientWidth > 414 ? &#39;20px&#39; : 20 * dpr * clientWidth / 360 + &#39;px&#39;;
      vp.name = &#39;viewport&#39;;
      vp.content = `initial-scale=${1.0 * 1 / dpr}, maximum-scale=${1.0 * 1 / dpr}, minimum-scale=${1.0 * 1 / dpr}, user-scalable=no, width=device-width`;
      var m = document.getElementsByTagName(&#39;meta&#39;)[0];
      m.parentNode.insertBefore(vp, m);
    })();
  </script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    ul, li{
      list-style: none;
    }
    .lines {
      width: 10rem;
      margin: 0 auto;
    }
    .lines li {
      border: 1px solid #cccccc;
      height: 2.5rem;
      line-height: 2.5rem;
      text-align: center;
      border-radius: 0.6rem;
      margin-top: 0.5rem;
    }
  </style>

  
• 1
  
• 2

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

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

相关推荐：

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

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

위 내용은 모바일 H5 페이지의 1px 테두리에 대한 해결 방법에 대해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!