javascript - 브라우저 확대/축소 크기 구현 원리

Question

RT, 개인 사용 습관으로 인해 Chrome 사용 시 기본 확대/축소 비율이 90%로 조정되어 있습니다. 오늘 일부 페이지를 테스트할 때 스타일 장애가 발생했습니다. 그러나 확대/축소 비율을 100%로 하면 모든 브라우저 테스트가 완료되었습니다. 정상이고, 저해상도 컴퓨터에서의 테스트도 정상이어서 스케일링 원리를 이해하자는 생각이 좀 들었고, 몇 가지 정보를 확인해보니 html 태그의 너비와 높이가 변경되었다고 하더군요. . 그런데 실제 테스트를 해보니 그렇지 않더군요. 그래서 전문가 여러분께 여쭤보고 싶은 것이 브라우저 확대/축소의 원리가 무엇인지 입니다. 감사합니다

Answer 1

우리가 일반적으로 보는 페이지는 일반적으로 기기 픽셀의 크기(100% 확대/축소), 더 정확히 말하면 기기 픽셀과 CSS 픽셀이 1:1로 되어 있는 장면입니다. 화면을 확대/축소하면 장치 픽셀은 변경되지 않지만 CSS 픽셀은 변경됩니다. 자세한 내용은 다음 블로그를 읽어 보시기 바랍니다: https://www.quirksmode.org/mo...

Answer 2

으아악

Answer 3

CSS에는 콘텐츠 크기 조정을 제어하는 ​​zoom 속성이 있습니다. 브라우저의 확대/축소는 아마도 비슷한 방식으로 구현될 것입니다. 정렬 문제의 경우 대부분의 브라우저에는 글꼴에 대한 기본 최소값이 있습니다. 이 값이 최소값보다 작으면 텍스트 크기가 조정되지 않아 콘텐츠가 레이아웃을 감싸거나 늘어납니다.