현재 우리는 모바일 우선 세계에 살고 있기 때문에 휴대폰이나 에뮬레이트된 휴대폰에서 웹 사이트를 쉽게 테스트할 수 있는 것이 점점 더 중요해지고 있습니다. 저는 웹사이트 및 소셜 미디어 서비스 관련 작업을 하는 사람들과 협력하고 있으며 그들이 데스크톱 브라우저에서 모바일 보기로 정기적으로 웹사이트를 열도록 권장하고 싶습니다. 저는 특히 브라우저가 제공하는 다른 모든 개발자 도구 사이에 숨겨져 있는 브라우저의 내장 "모바일 보기" 기능에 대해 생각하고 있지만 설정이 빠른 모든 기능을 고려하게 되어 기쁩니다.
데스크탑 브라우저에서 웹사이트의 모바일 보기를 어떻게 열 수 있나요?
답변1
파이어폭스:
- Windows/Linux에서는 Ctrl+ Shift+를 누릅니다.M
- macOS에서는 option+ command+를 누릅니다.M
("도구"), "웹 개발자", "반응형 디자인 모드"에서도 메뉴 항목을 찾을 수 있습니다.
크롬과 엣지:
먼저 "개발자 도구"를 열어야 합니다.
- Windows/Linux에서는 Ctrl+ Shift+를 누르 I거나 그냥 누르세요.F12
- macOS에서는 option+ command+를 누릅니다.I
개발자 도구가 열려 있고 초점이 맞춰지면 장치 에뮬레이션을 전환할 수 있습니다.
- Windows/Linux에서는 Ctrl+ Shift+를 누릅니다.M
- macOS에서는 command+ shift+를 누릅니다.M
키보드 단축키를 누르는 대신 버튼을 클릭하려는 경우 개발자 도구 도구 모음에 장치 에뮬레이션을 활성화하는 작은 버튼이 있습니다.
원정 여행:
Apple이 반응형 디자인 모드로 들어가기 위한 키보드 단축키를 기본적으로 비활성화한 것 같습니다. 당신은 따라갈 수 있습니다키보드 단축키 구성에 대한 이 튜토리얼.
"개발", "반응형 디자인 모드 시작"을 클릭하면 메뉴 항목을 찾을 수 있습니다. "개발" 메뉴 항목이 표시되지 않으면 "기본 설정", "고급"을 열고 "메뉴 막대에 개발 메뉴 표시"를 선택하여 활성화해야 합니다.
답변2
플림의 답변100% 정확합니다. 단축키를 기억하는 것이 너무 번거로운 경우를 대비해 개발자 도구에 있는 이 파란색 버튼을 사용하여 웹 보기와 모바일/태블릿 보기 사이를 전환할 수 있습니다.
또는 Firefox를 사용하는 경우:
장치 도구 모음을 활성화한 후 드롭다운 메뉴에서 에뮬레이트하려는 장치의 제조업체와 모델을 선택할 수 있습니다.
답변3
테스트 목적으로 다음 웹사이트를 사용합니다.
위의 두 사이트 모두 다양한 장치 너비에서 웹 애플리케이션을 볼 수 있도록 해줍니다.
답변4
브라우저에 "사용자 에이전트 전환기" 확장을 추가하고 모바일 사용자 에이전트를 지정하세요. 웹사이트가 다음과 같은 경우똑똑한모바일에 최적화된 버전을 제공하기에 충분합니다.
특정 확장 프로그램을 권장하지 않습니다. 이상적인 것은 모바일 브라우저에 대한 사전 설정이 내장되어 있어야 하고 웹사이트별로 사용자 에이전트 전환을 활성화 또는 비활성화할 수 있는 기능이 있어야 합니다.