부트 스트랩의보기 포트를 사용하여 모바일보기와 데스크톱보기간에 전환하는 방법은 무엇입니까?

Question

부트 스트랩으로 디자인 된 HTML 페이지가 있으며 데스크톱 브라우저에서 데스크톱보기 및 모바일보기로 렌더링하려고합니다. 예를 들어 DESKTOP 및 MOBILE이라는 페이지에 두 개의 버튼이 있으며 사용자가 DESKTOP 버튼을 클릭하면 페이지가 DESKTOP VIEW으로 다시로드되고 사용자가 MOBILE 버튼을 클릭하면 페이지는 MOBILE VIEW으로 다시로드됩니다. 나는 viewport을 사용하고 또한 ResponsiveViewPort을 사용하여 구현을 시도했다. 그러나 좋은 결과를 얻지 못했습니다. 누구나 나를 올바른 길로 안내 할 수 있다면 매우 유용 할 것입니다.

Answer 1

이 Previewer jquery 플러그인은 거의 모든 요구 사항을 충족합니다.

Here은 크롬에서 장치 도구 모음 것에서 특별한 코딩이 필요하지 않습니다 해당 라이브러리

Answer 2

하나의 대안의 데모입니다. F12 키를 누른 다음 태블릿과 휴대 전화처럼 보이는 왼쪽 상단의 아이콘을 클릭합니다.

이 상단에 막대를 열고 이에 따라 뷰포트를 조정합니다.

당신은 기본 장치 중 하나를 선택하거나 직접 만들 ... 편집을 사용할 수 있습니다. 메뉴에 표시되지 않도록 선택되어있는 기본값 목록도 훨씬 많습니다. 다른 기본 설정도 많이 있습니다.

실제 장치에서 테스트 할 수있는 좋은 대안은 없지만이 방법을 사용하면 다른 장치 크기에서 사이트가 어떻게 보이는지 알 수 있습니다.

또한 모든 장치가 화면 크기와 해상도가 약간 다르다는 점에 유의하십시오. 이는 특수 뷰포트를 만드는 것만으로는 표시되지 않는 세부 정보입니다. 공통 디바이스의 특성을 갖는 뷰포트를 작성할 수는 있지만 다른 디바이스에서 동일한 레이아웃을 정확하게 볼 수는 없습니다.

다른 브라우저와 유사한 기능을 가지고 :

• 파이어 폭스는 '반응 형 디자인 모드 "가 있습니다. 토글하려면 햄버거 메뉴, 개발자, 반응 형 디자인 모드를 클릭하거나 단축키 Ctrl + Shift + M을 사용하십시오.
• 가장자리에는 일부 Windows 장치 (표면 태블릿, Nokia Windows 전화 등)에 대한 모드가 있습니다.
• IE 11 에뮬레이션 탭에는 디스플레이 방향과 해상도에 대한 몇 가지 기본 설정이 있습니다.