집 >웹 프론트엔드 >부트스트랩 튜토리얼 >부트스트랩을 휴대폰 화면에 적용하는 방법
부트스트랩을 휴대폰 화면에 적용하는 방법
- 尚원래의
- 2019-07-18 17:19:083397검색
Bootstrap 프레임워크를 사용하면 작은 크기의 로컬 디버깅에는 문제가 없습니다. 휴대폰으로 전환하여 열어도 여전히 큰 화면 효과가 있습니다.
해결책은 실제로 매우 간단합니다.
공식 웹사이트 설명:
HTML5 문서 유형
Bootstrap에서 사용하는 일부 HTML 요소 및 CSS 속성은 페이지를 HTML5 문서 유형으로 설정해야 합니다. 프로젝트의 모든 페이지는 다음 형식을 따라야 합니다.
<!DOCTYPE html> <html lang="zh-CN"> ... </html>
Mobile First
Bootstrap 2에서는 프레임워크의 특정 핵심 부분에 모바일 친화적인 스타일을 추가했습니다. 그리고 Bootstrap 3에서는 처음부터 전체 프레임워크를 모바일 친화적으로 다시 작성했습니다. 이번에는 단순히 모바일 장치에 대한 일부 선택적 스타일을 추가하는 것이 아니라 이를 프레임워크의 핵심에 직접 통합하는 것입니다. 즉, Bootstrap은 모바일 우선입니다. 추가 파일을 추가하는 대신 모바일 전용 스타일이 프레임의 모든 모서리에 통합됩니다.
올바른 그리기 및 터치 크기 조정을 보장하려면 뷰포트 메타데이터 태그를 93f0f5c25f18dab9d176bd4f6de5d30e
<meta name="viewport" content="width=device-width, initial-scale=1">
모바일 브라우저에서는 뷰포트의 메타 속성을 user-scalable=no로 설정하여 확대/축소를 비활성화할 수 있습니다. 확대/축소 기능을 비활성화하면 사용자는 화면을 스크롤만 할 수 있으므로 웹사이트가 기본 애플리케이션처럼 보입니다. 모든 웹사이트에 이 방법을 권장하는 것은 아니며 상황에 따라 달라질 수 있습니다.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Bootstrap과 관련된 더 많은 기술 기사를 보려면 Bootstrap Tutorial 칼럼을 방문하여 알아보세요!
위 내용은 부트스트랩을 휴대폰 화면에 적용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!