☰

Google Chrome - 뷰포트를 변경하지 않고 확대/축소

tag-icon • tag-icon google-chrome google-chrome-extensions zoom
Google Chrome - 뷰포트를 변경하지 않고 확대/축소

어쩌면 내가 뭔가를 간과했거나 내 질문을 제대로 표현하는 방법을 몰랐을 수도 있지만 온라인에서 이에 대한 내용을 찾을 수 없었습니다.

뷰포트나 웹사이트를 전혀 변경하지 않고 Chrome을 확대하고 싶습니다. 따라서 웹 사이트를 확대하면 반응형 디자인이 세부 사항을 이동하거나 "올바른" 크기로 조정하지 않고도 세부 사항을 확대할 수 있습니다.

이를 위한 Chrome 확장 프로그램이 있나요? 아니면 Chrome에서 이러한 확대/축소 기능을 활성화하는 방법이 있나요?

답변1

정밀한 터치패드(대부분의 새 노트북에 이 기능이 있음)나 터치 스크린이 있는 경우 핀치 아웃하여 확대/축소할 수 있습니다.

답변2

이 확장은 바로 당신이 찾고 있는 것입니다:사용자 정의 페이지 확대/축소

하지만 안타깝게도 바로가기가 없습니다.

추신: 이 확장 프로그램은 어떤 이유로든 귀하가 방문하는 모든 웹사이트에 대한 데이터 액세스를 요청한다는 점을 명심하세요.

답변3

macOS의 경우
웹페이지를 가져가세요. 확대/축소하려면 Command와 "+" 버튼을 누르세요.

윈도우의 경우
웹페이지를 가져가세요. Ctrl 버튼을 누른 상태에서 마우스 휠을 위로 스크롤합니다.

편집하다

1) 시스템 환경설정->접근성으로 이동합니다
. 2) 확대/축소를 선택하고 "확대/축소에 키보드 단축키 사용"을 활성화합니다.
3) 단축키를 기록해 둡니다.
4) 기본적으로 ⌥- ⌘- =확대 및 ⌥- ⌘- -축소입니다.

답변4

사용자 에이전트(Chrome, Firefox, Android용 Chrome 등)에는 본문을 뷰포트의 100%, 정확히 말하면 시각적 뷰포트로 설정하는 기본 동작이 있습니다. 따라서 창 크기가 조정되면 뷰포트(레이아웃 및 시각적)가 변경되어 항상맞다반응형 디자인의 레이아웃 변경과 같은 바람직하지 않은(항상 그런 것은 아님) 결과를 초래합니다.

모바일 우선 접근 방식을 사용하는 경우 본문 min-width(미디어 쿼리에서)을 절대값으로 설정하고 min-device-width또는 를 사용하여 max-device-width미디어 쿼리를 트리거하세요.

이는 브라우저 창의 크기를 조정할 때가 아니라 미디어 쿼리에 크기가 언급된 장치에서 콘텐츠가 렌더링될 때만 미디어 쿼리를 트리거합니다.

예:

body {
width : 90%;
}

그리고 다음과 같은 미디어 쿼리를 사용하십시오.

@media screen and (min-device-width: 960px) {

  body {
   width : 900px;
  }

// Other CSS Rules to apply when device width > 960px
}

이렇게 하면 브라우저 창의 크기를 조정하거나 확대/축소하더라도 레이아웃이 모바일 장치에서는 반응하지만 데스크톱에서는 반응하지 않습니다. 대신 콘텐츠를 확대하거나 크기를 조정할 때 가로 스크롤 막대를 표시합니다.

이 접근 방식을 사용하면 태그 사용을 건너뛸 수도 있습니다 <meta name="viewport" content="width=device-width, initial-scale=1" >(권장하지는 않지만).

도움이 되었기를 바랍니다!

관련 정보