iPhone에서 Simple Bootstrap 페이지가 응답하지 않음


84

Twitter Bootstrap 예제를 다운로드하여 간단한 레일 프로젝트를 만들었습니다. 필요한 곳에 CSS를 복사했는데 잘 표시됩니다. 또한 js를 복사했고 모든 것이 데스크탑에서 잘 작동합니다. 브라우저의 크기를 변경하면 페이지가 재구성됩니다. 크기가 다른 일부 "반응 형 디자인 테스트 도구"를 사용하면 잘 작동합니다.

내가 가진 문제는 내 iPhone에 있습니다. 내 바탕 화면처럼 표시됩니다.

Bootstrap Hero Example 페이지 (내가 시작한 페이지)를 시도하면 iPhone에서 잘 작동합니다.

무엇이 잘못 될 수 있습니까? CSS를 거의 다루지 않았고 바닥 글에 패딩을 추가했습니다.

참고로, 내가 변경 한 CSS는 내 앱을 application.css다음 콘텐츠와 연결한다는 것입니다 .

/* Application stylesheet */

@import url(bootstrap.css);
@import url(bootstrap-responsive.css);

/* Body */
body {
    padding-top: 60px;
    padding-bottom: 40px;   
}   

/* Footer */
footer {
    padding: 20px 0;
}

테스트 페이지 나 코드를 게시 할 수 있습니까?
Andres Ilich 2012

저에게는 반응이 좋습니다. 왜 반응이 없다고 생각합니까?
Jesse Wolgamott 2012

@RaySF 나는 그것이 작동하지 않아야하는 이유를 볼 수 없지만 @import사용 중인 규칙에 대해 약간의 불만 이 있지만 그것은 개인적인 것입니다. 테스트 케이스를 게시 할 수 있습니까?
Andres Ilich 2012

@JesseWolgamott 내 아이폰에서 반응하지 않습니다. 위에서 언급 한 두 페이지를 열면 공식 예제가 잘 작동하지만 (예를 들어 메뉴가 동일하게 표시되지 않음) 내 페이지가 데스크톱처럼 표시됩니다.
RaySF

1
@RaySF 제 직업의 특성상 저는 @import표기법을 사용하여 쌓인 매우 큰 스타일 시트의 호환성을 높이고 성능을 높이는 방법을 연구해야했습니다 . 그 과정에서 그 기술로 인해 많은 문제가 발생했으며 나중에 html <link>태그 를 사용하여 스타일 시트를 추가하여 수정 된 biiig 성능 저하 (및 설명 할 수없는 많은 오류)가 있음을 발견했습니다 . 나중에 같은 질문에 의해 지원되었다 의심 여기에 SO있다.
Andres Ilich 2012

답변:


184

다음을 추가하십시오.

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

귀하의 <head>.

비슷한 문제가 있었고 뷰포트 너비의 문제라고 잘못 생각했습니다.

업데이트 : 더 완전한 버전은 @NicolasBADIA 답변을 확인하십시오.


8
그리고 이것은 세로보기와 가로보기가 모두 작동하도록하려면 : <meta name = "viewport"content = "width = device-width; initial-scale = 1.0; maximum-scale = 1.0; user-scalable = 0;" />
virtualeyes 2012 년

@virtualeyes, 팁 주셔서 감사합니다! 사용자 확장을 허용하고 lanscape view가 제대로 작동하도록하는 방법을 알고 계십니까?
Andrei

아니요, 저는 반응 형 디자인을별로 믿지 않는 JQuery 모바일을 사용합니다. 모바일은 모바일로, 태블릿은 물론 데스크톱까지 가능합니다. , ;-) 상관 없어 그 사이에 아무것도
virtualeyes

111

frntk에서 제안한 코드는 장치를 가로보기로 돌리면 작동하지 않으며 virtualeyes에서 제공하는 솔루션은 쉼표 대신 세미콜론을 사용하기 때문에 올바르지 않습니다. 올바른 코드는 다음과 같습니다.

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

출처 : https://developer.mozilla.org/en/Mobile/Viewport_meta_tag


4
이를 사용하려면 Twitter Bootstrap 공식 사이트의 예제를 업데이트해야합니다.
wenbert

1
감사합니다! 화면 회전과 비슷한 문제가 있었지만 이제는 매력처럼 작동합니다.
Mark Vital

8
이것은 허용 된 답변이어야합니다!
Sheharyar

6

물론, 매우 작은 케이스이지만 언급 할 가치가 있습니다.

DNS 공급자를 통해 도메인 전달을 사용하는 경우 사이트가 iframe으로 래핑 될 수 있습니다. 예를 들어 GoDaddy는 도메인을 마스킹하고 전달하는 경우이 기술을 사용합니다.


2
이 문제를 해결하기 위해 몇 시간을 보냈고 결국이 댓글을 발견했습니다. 감사합니다!
Ed Shee

이 의견은 소수의 사람들을 매우 행복하게 만들 것입니다.
Nicolas Rojo

iframe이 래핑되어 있지는 않지만 올바른 메타 태그에 문제가있는 경우 iframe을 숨길 수 있습니까?
helle

3

나는이 문제에 몇 시간 동안 붙어 있었다.

또한 콘텐츠를 내부에 배치하는 것을 잊지 마십시오. <div class="container-fluid">...</div>


container-fluid나를 위해 속임수를 썼는지!
Paula
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.