적절한 중단점을 만들 수 있도록 화면 크기에 대한 너비 값을 입력하고 싶습니다. 나는 종종 한 번에 한 픽셀씩 크기를 조정하려고 노력합니다. Chrome에서는 때때로 한 번에 두 픽셀씩 이동하기 때문에 이것이 항상 성공적인 것은 아닙니다. 너비를 특정 너비로 입력하는 방법이 있습니까?
저는 Mac OS X를 사용하고 있습니다. 이 질문은 개발 도구와 관련이 있습니다. 키보드를 사용하여 브라우저 창 너비를 설정하는 데 어떻게 사용할 수 있는지 묻고 있기 때문입니다. 마우스로 개발 화면과 페이지 사이의 너비를 조정하면 창의 너비와 높이를 나타내는 숫자가 나타납니다. 이는 중단점을 사용하여 반응형 웹 사이트를 만들 때 유용합니다. 점 단위 정밀도를 얻기 위해 마우스를 사용할 필요가 없도록 키보드로 이 작업을 수행하는 방법을 알고 싶습니다.
답변1
Chrome 개발자 도구에서 콘솔을 연 다음 에뮬레이션 탭을 선택합니다. 여기서는 일반적인 장치 목록에서 선택할 수 있는 "장치"(예: iPhone, 서버로 전송된 사용자 에이전트도 변경됨)를 찾을 수 있고 크기를 수동으로 설정하는 "화면"을 찾을 수 있습니다.
또한보십시오모바일 에뮬레이션Chrome의 도움말에서
답변2
Chrome에는 '웹 개발자 도구'라는 확장 프로그램이 있습니다. 해당 확장에는 브라우저 크기를 특정 HxW로 조정할 수 있는 기능이 있습니다. 자신만의 크기를 설정할 수도 있습니다.
(링크 게시가 허용되는지 확실하지 않으므로 그렇게 하지 않겠습니다.)
편집하다:
고마워요 윌!
확장 작성자에 대한 링크는 다음과 같습니다.http://chrispederick.com/work/web-developer/
답변3
Window Resizer(https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh) 이는 @Marcelo가 언급한 것과 동일합니다. 이는 이전 버전의 Chrome을 사용하는 모든 사람에게 유용할 수 있습니다.
답변4
플러그인이 필요하지 않은 대체 접근 방식입니다.
- 내장된 Chrome 개발자 도구(
F12또는Ctrl + Shift + I) 를 엽니다. Console탭 을 선택하세요- 현재 URL로 새 창을 열려면 다음을 입력하십시오. (다음 단계는 크기 조정이 가능하도록 명시적으로 열린 창에서만 작동합니다.)
let w = window.open(window.location, "dev resize", "resizable");
그런 다음 다음 중 하나를 수행하여 새로 열린 창의 크기를 조정할 수 있습니다.
- 새 창에서 Chrome DevTools를 열고 다음을 입력하세요.
window.resizeTo(window.outerWidth - 1, window.outerHeight); - 원래 창으로 돌아가서 입력하세요.
w.resizeTo(w.outerWidth - 1, w.outerHeight);
resizeTo매번 너비를 1픽셀씩 줄이려는 만큼 명령을 반복합니다 .
Firefox에서도 작동합니다(아마 Edge에서도 작동하지만 테스트하지는 않았습니다).
테스트 대상:
- 크롬 버전
111.0.5563.65 - Firefox 버전
111.0(Firefox와 Chrome의 버전 번호가 일치하는 것은 단지 우연의 일치라고 생각합니다)