반응형
CSS와 미디어 쿼리를 사용하여 반응형 웹 디자인을 구현할 수 있습니다.
다음은 화면 크기를 고정하는 간단한 예제입니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* 기본 스타일 */
body {
font-size: 16px;
}
/* 세로 모드 스타일 */
@media screen and (orientation: portrait) {
body {
width: 100%;
height: 100vh;
overflow: hidden;
}
}
/* 가로 모드 스타일 */
@media screen and (orientation: landscape) {
body {
width: 100%;
height: 100vh;
overflow: hidden;
}
}
</style>
</head>
<body>
<!-- 웹 페이지 내용 -->
</body>
</html>이 예제는 화면의 세로 및 가로 모드에서 모두 화면 크기를 고정합니다.
@media 쿼리를 사용하여 화면 방향을 감지하고, 해당 방향에 따라 body 요소의 너비와 높이를 100%로 설정하고 overflow: hidden;으로 스크롤을 비활성화합니다.
이렇게 하면 사용자가 모바일 디바이스의 방향을 변경해도 페이지가 고정된 크기로 유지됩니다.
페이지의 내용은 고정된 크기 내에서 스케일링될 것입니다. 원하는 스타일 및 디자인에 따라 CSS를 조정할 수 있습니다.
반응형
'MOBILE' 카테고리의 다른 글
| 모바일 디바이스에서 가로모드 또는 세로모드 감지 (0) | 2023.10.03 |
|---|---|
| [Android] Intent 활용 예시 (0) | 2023.10.01 |
| android permission 정리 (0) | 2023.09.26 |
| 안드로이드에서 비디오 재생하기: MediaPlayer (0) | 2016.11.07 |
| [ANDROID(안드로이드) 앱 개발 기초] MEDIAPLAYER 음악 재생하기 (0) | 2016.11.07 |
| Stream Play online audio mp3 from URL in android without downloading (0) | 2016.11.04 |
| Android VideoView error 처리하기 (0) | 2016.11.04 |
| 안드로이드: 서비스 Service 예제 (0) | 2016.11.04 |
댓글