iPhone에서 Simple Bootstrap 페이지가 응답하지 않음
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;
}
다음을 추가하십시오.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
귀하의 <head>.
비슷한 문제가 있었고 뷰포트 너비의 문제라고 잘못 생각했습니다.
업데이트 : 더 완전한 버전은 @NicolasBADIA 답변을 확인하십시오.
frntk에서 제안한 코드는 기기를 가로보기로 돌리면 작동하지 않으며 virtualeyes에서 제공하는 솔루션은 쉼표 대신 세미콜론을 사용하기 때문에 올바르지 않습니다. 올바른 코드는 다음과 같습니다.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
출처 : https://developer.mozilla.org/en/Mobile/Viewport_meta_tag
물론, 매우 작은 케이스이지만 언급 할 가치가 있습니다.
DNS 공급자를 통해 도메인 전달을 사용하는 경우 사이트가 iframe에 래핑 될 수 있습니다. 예를 들어 GoDaddy는 도메인을 마스킹하고 전달하는 경우이 기술을 사용합니다.
나는이 문제에 몇 시간 동안 붙어 있었다.
또한 콘텐츠를 내부에 배치하는 것을 잊지 마십시오. <div class="container-fluid">...</div>
참고 URL : https://stackoverflow.com/questions/9386429/simple-bootstrap-page-is-not-responsive-on-the-iphone
'Program Tip' 카테고리의 다른 글
| Xcode의 Organizer에서 앱을 제거하려면 어떻게해야합니까? (0) | 2020.09.25 |
|---|---|
| 레일이 생산 중인지 어떻게 알 수 있습니까? (0) | 2020.09.25 |
| Ruby on Rails : ActiveRecord를 사용하여 두 열로 정렬하려면 어떻게해야합니까? (0) | 2020.09.25 |
| 활동에서 편집 텍스트 사이에 수평 제수 선을 넣는 방법 (0) | 2020.09.25 |
| Eclipse가 Java를위한 최고의 IDE입니까? (0) | 2020.09.25 |