bootstrap3은 어떤 장치를 먼저 지원합니까?

bootstrap3은 "모바일" 장치에 대한 지원을 우선시합니다. Bootstrap3은 모바일 우선 디자인 개념입니다. 디자인된 모든 스타일은 기본적으로 모바일 장치에 적용되며, 미디어 쿼리를 사용하여 다른 크기의 장치에 대한 디자인을 단계별로 추가합니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, bootsrap 버전 3.3.7, DELL G3 컴퓨터

Bootstrap 3은 모바일 우선 프런트 엔드 프레임워크입니다. 모바일 우선은 디자인된 모든 스타일이 기본적으로 모바일 장치에 적용된다는 것을 의미하며, 그런 다음 디자인에서는 미디어 쿼리를 사용하여 다른 크기의 장치에 대한 디자인을 단계별로 추가합니다.

이전 Bootstrap 버전(2.x까지)에서는 전체 프로젝트를 모바일 친화적으로 만들기 위해 다른 CSS를 수동으로 참조해야 했습니다.

지금은 다릅니다. Bootstrap 3의 기본 CSS 자체는 모바일 친화적입니다.

Bootstrap 3은 모바일 우선, 데스크톱 둘째로 설계되었습니다. 점점 더 많은 사용자가 모바일 장치를 사용하고 있기 때문에 이는 실제로 매우 시의적절한 변화입니다.

Bootstrap에서 개발한 웹사이트를 모바일 친화적으로 만들고 적절한 그리기 및 터치 스크린 크기 조정을 보장하려면 아래와 같이 웹 페이지 헤드에 뷰포트 메타 태그를 추가해야 합니다.

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

• width 속성은 장치의 너비를 제어합니다. 귀하의 웹 사이트가 다양한 화면 해상도를 가진 장치에서 볼 것이라고 가정하면, 이를 장치 너비로 설정하면 다른 장치에서도 올바르게 렌더링됩니다. width 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览，那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。

• initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。

在移动设备浏览器上，通过为 viewport meta 标签添加 user-scalable=no 可以禁用其缩放（zooming）功能。

通常情况下，maximum-scale=1.0 与 user-scalable=no

initial-scale=1.0 웹페이지가 로드될 때 크기 조정 없이 1:1 비율로 렌더링되는지 확인하세요.

모바일 브라우저에서는 viewport 메타 태그에 user-scalable=no를 추가하여 확대/축소를 비활성화할 수 있습니다. 일반적으로 maximum-scale=1.0은 user-scalable=no와 함께 사용됩니다. 확대/축소를 비활성화하면 사용자는 스크롤만 할 수 있으므로 웹사이트가 기본 앱처럼 보입니다.

🎜모든 웹사이트에 이 방법을 권장하는 것은 아니며 상황에 따라 달라질 수 있습니다! 🎜

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, 
user-scalable=no">

🎜추천 학습: "🎜부트스트랩 사용 튜토리얼🎜"🎜

위 내용은 bootstrap3은 어떤 장치를 먼저 지원합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!