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

139

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

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

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

— 법률
소스

378

이것을 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을 참조 하십시오.

— 짐
소스

1

나는 머리 부분 에이 코드를 추가했지만 안드로이드의 기본 인터넷 익스플로러에서 작동하지 않습니다

— -www.freerechargeapp.com/index.html

나는 왜 나를 위해 일하지 않는지 이해하지 못한다. 한 웹 사이트에서는 작동하지만 다른 웹 사이트에서는 작동하지 않습니다. 코드 구조는 새로운 부트 스트랩과 비슷합니다

— bheatcoker

1

@Skelly-내가 본 다른 답변들 대신에 maximum-scale사용 1.0했습니다 1. 이런 것들이 차이가 나는지 아십니까?

— onebree

1

당신은 저를 저장 :) 감사합니다.

— Fatih

1

2 년 후 게시물이 여전히 shiznizzle입니다 (sic.) 😎

— Walt

17

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

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

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

— 톰
소스

덕분에 iPhone의 배율 문제가 해결되었으며 세로 및 가로가 다르게 (정확하게) 표시됩니다.

— SexxLuthor

0

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

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

— 데이 데이비스 워터 버리
소스

0

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

— 존 큐
소스