Lenovo ThinkPad 웹 사이트의 아이콘

Question

이 질문은 다소 이상한 질문이지만 최소한 해결책이나 가능성을 찾도록 도와주세요.

우리 웹 사이트에는 클릭 할 때 가운데에 "+"가있는 일종의 둥근 버튼이 있습니다.이 버튼을 클릭하면 아래쪽에 다른 버튼이 열립니다.

이 팝업 버튼은 아이콘이 중심 콘텐츠로만 표시되며 각 콘텐츠는 24px 너비와 높이에 부합합니다. 중심 맞춤을 위해 우리는 left: 50%과 top:50% 그리고 transform:translate(-12px,-12px)과 같은 방법을 사용합니다. 보통 flexbox 방법을 중심으로합니다.

모든 테스트에서 이러한 아이콘은 공정하게 가운데에 배치됩니다 (물론 크로스 브라우저 및 크로스 장치와의 픽셀 차이가 항상 있음).

이제 마지막으로 남은 문제는 레노버 씽크 패드 (선택 브라우저)의 아이콘이 멀리 떨어져 있어야한다는 것입니다. 왼쪽 또는 아래쪽으로 5 ~ 6 픽셀 정도의 간격을 둡니다. 오늘까지이 문제를 어떻게 해결할 수 있는지 알 수 없었습니다.

다른 장치에서는 Windows 또는 브라우저가 설치된 랩톱 또는 PC로 설정하면 의도 한대로 표시됩니다.

내 질문에 : Lenovo ThinkPad에서이 아이콘을 다르게 표시하는 이유는 누구입니까? Lenovo ThinkPad가 다르게 렌더링되거나 DPI 또는 우리가 인식하지 못하는 다른 제품이 있습니까?

답변 해 주셔서 감사합니다.

Answer 1

관심있는 모든 사람들 안녕하세요, 우리는 글꼴 - 가족의 문제를 발견 한

: "재료 아이콘". 이 CSS는 Lenovo ThinkPad에서 부 자연스러운 동작을 추가하여 일부 아이콘의 오른쪽에 이상한 공백을 추가합니다.

제안 해 주셔서 감사합니다.

Answer 2

기기의 device pixel ratio을 확인해야합니다. translate 및 적절한 픽셀을 사용해도 문제가 발생하는 경우가 있습니다.

이 website은 세부 정보를 얻을 수 있도록 도와줍니다.

미디어 쿼리와 변수 픽셀 비율을 사용하여 대상 그들을 :

@media only screen and (min-device-pixel-ratio: 2) { 
     /* your code */ 
}