우리는 현재 모바일 우선 세계에 있기 때문에 휴대 전화 또는 에뮬레이트 된 휴대 전화에서 웹 사이트를 쉽게 테스트 할 수있는 것이 점점 더 중요 해지고 있습니다. 웹 사이트 및 소셜 미디어 서비스를 제공하는 사람들과 협력하고 있으며 데스크톱 브라우저에서 모바일보기로 웹 사이트를 정기적으로 열도록 권장하고 있습니다. 브라우저에 내장 된 "모바일보기"기능을 생각하고 있는데,이 기능은 브라우저가 제공하는 다른 모든 개발자 도구 중에 숨겨져 있지만 설정이 빠른 것만 고려하면 기쁩니다.

데스크탑 브라우저에서 웹 사이트의 모바일보기를 어떻게 열 수 있습니까?

Firefox :

• 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

개발자 도구 ( "추가 도구", "Develepor 도구")를 열고 "장치 도구 모음 전환"표 앞의 휴대폰 모양의 아이콘을 클릭하여 메뉴 항목을 찾을 수도 있습니다.

원정 여행:

반응 형 디자인 모드로 들어가기위한 키보드 단축키는 Apple에서 기본적으로 비활성화 한 것 같습니다. 키보드 단축키 구성에 대한이 학습서를 따를 수 있습니다 .

"개발", "응답 디자인 모드 들어가기"를 클릭하여 메뉴 항목을 찾을 수 있습니다. "개발"메뉴 항목이 보이지 않으면 "환경 설정", "고급"을 열고 "메뉴 표시 줄에 개발 메뉴 표시"를 선택하여 활성화해야합니다.

가장자리:

• 를 눌러 F12개발자 도구 를 연 다음 Ctrl+ 7를 눌러 "에뮬레이션 탭"을 엽니 다. 에뮬레이션하려는 장치를 구성하십시오.

웹 페이지 내부를 마우스 오른쪽 버튼으로 클릭하고 "요소 검사"를 선택하여 마우스를 사용하여 개발자 도구를 열 수 있습니다.

Flimm의 답변 은 100 % 정확합니다. 바로 가기를 기억하는 것이 너무 번거로운 경우 개발자 도구의 웹 버튼과 웹 / 모바일 / 태블릿 간을 전환하는 것은 파란색 버튼입니다.

또는 Firefox의 경우 :

장치 도구 모음을 활성화 한 후 드롭 다운 메뉴에서 에뮬레이션하려는 장치의 제조업체와 모델을 선택할 수 있습니다.

테스트 목적으로 다음 웹 사이트를 사용합니다.

1. http://www.jamus.co.uk/demos/rwd-demonstrations/
2. http://mattkersley.com/responsive/

위의 두 사이트를 통해 웹 응용 프로그램을 여러 장치 너비로 볼 수 있습니다.

브라우저에 "사용자 에이전트 스위처"확장자를 추가하고 모바일 사용자 에이전트를 지정하십시오. 웹 사이트가 충분히 똑똑 하다면 모바일 최적화 버전을 제공합니다.

특정 확장명을 권장하지 않습니다. 이상적인 것은 내장 된 모바일 브라우저에 대한 사전 설정과 웹 사이트별로 사용자 에이전트 전환을 활성화 또는 비활성화하는 기능이 있어야합니다.

위의 답변은 단일 브라우저를 사용하거나 데스크탑 "작업 공간"(예 : 저해상도에서 21 인치 미만의 단일 모니터)이 제한된 사용자에게 적합합니다.

실제로 최근에 발견 한 훨씬 더 흥미로운 솔루션이 있습니다. https://blisk.io/

개인 이익을 위해 (일부) "계열사 링크"를 사용하지 않습니다 ( "토큰 기반 시스템"이 있으므로 무료 "팀 클라우드 공간"및 "프리미엄 기능")을 사용할 수 있습니다. 그러나 Blisk는 실제로 꽤 멋집니다.

이 Chrome 기반 '개발 용 브라우저'는 왼쪽에 세로 '창'이있는 다양한 기기에서 페이지를 데모 할 수있는 다양한 방법을 제공합니다. Chrome 개발자 도구는 기본적으로 오른쪽 세로 열이 기본입니다.

봐봐. "프리미엄 확장 기능"에는 약간의 제한이 있지만 페이지와 사이트의 PC 및 모바일 버전을 나란히 비교하여 "미리보기"하는 데 여전히 효과적입니다. 원격 팀에서 일하는 경우 유료 기능도 상당히 급격하게 보입니다 (개인적으로 월 비용으로 사람들을 사로 잡기 전에 더 나은 "테스트 드라이브"프로그램이 필요하다고 생각합니다).

전체 공개 : 모바일 미리보기 부분에 하루에 극도로 성가신 "시간 제한"이 있습니다 (아이콘에서 주소 표시 줄 오른쪽으로 열거 나 닫힘-작은 링크에서 "장치 미리보기"변경). 오른쪽 상단에있는 "장치 목록 표시"메뉴).

BliskDemo 스크린 샷

또한 : 다양한 운영 체제의 브라우저 사용자 에이전트 문자열 사이를 전환하여 조금 더 나아가는 Chrome / Firefox의 2 가지 "사용자 에이전트 전환기"와 같은 브라우저 확장 기능을 사용하여 정말 멋진 트릭을 발견했습니다. 그들을위한 브라우저.

"esolutions.se"버전을 선호합니다. 사용자 지정 사용자 에이전트 문자열을 목록에 추가하여 원하는만큼 많은 사용자 지정을 수행하는 것이 얼마나 쉬운 지 (오프라인으로도 실행되므로 특정 경우에 편리 할 수 ​​있음) : https : //chrome.google.com/webstore/detail/user-agent-switcher/clddifkhlkcojbojppdojfeeikdkgiae

어쨌든, 그것은 내 2 센트입니다. :피