[twitter-bootstrap] 반응 형 웹 사이트가 모바일에서 전체 너비로 축소되었습니다.

Bootstrap responsiveness navbar를 테스트 중이며 데모 웹 사이트가 있습니다. 바탕 화면에서 브라우저의 크기를 조정하면 상단에 작은 아이콘이있는 축소 가능 메뉴가되는 탐색 모음을 포함하여 모두 잘 작동합니다. 클릭하면 더 많은 메뉴 버튼을 볼 수 있습니다.

그러나 모바일 브라우저에서 시도했을 때 (Android의 크롬 및 인터넷 브라우저에서 시도했지만) 반응 형 디자인을 보지 못했습니다. 웹 사이트와 같은 매우 작은 버전의 데스크톱 만 볼 수있었습니다.

아무도 내가 뭘 잘못하고 있는지 지적 할 수 있습니까?



답변

이것을 HTML 헤드에 추가하십시오.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

이것은 작은 장치 브라우저에게 페이지 크기를 조정하는 방법을 알려줍니다. 이에 대한 자세한 내용은 https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html을 참조 하십시오.


답변

여기에 제안 된대로 http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/

<meta name="viewport" content="initial-scale=1">

자동 스케일링이 가능하기 때문에 자연스럽게 / 높이가 적용되므로 세로에서 가로로 이동하고 훨씬 더 쾌적한 사용자 경험을 제공하므로 더 나은 선택이 될 것입니다.


답변

허용 된 답변이 작동하지 않는이 오류를 검색하는 사람들을 위해 이것을 추가하십시오. 나는 이것이 더 드물지만 그럼에도 불구하고 실망스러운 사례라고 생각합니다.

페이지가 프레임 세트 내에서 렌더링되는 경우 (예 : 도메인 클로킹) 메타 태그를 넣는 것이 도움이되지 않습니다. DNS 호스트에 따라 액세스하거나 액세스하지 못할 수도있는 클로킹 도메인의 페이지에 해당 파일을 넣어야합니다.


답변

브라우저 캐시를 지우고 새 탭에서 페이지를여십시오. 때때로 문제가 발생할 때마다 해결됩니다.


답변