답변 1개
CSS에서 뷰포트의 가로 스크롤을 막고,
컨테이너의 최대 너비를 제한하는 스타일을 적용하면 됩니다
/* 모바일 화면에서 좌우 스크롤 방지 */
body, html {
overflow-x: hidden; /* 가로 스크롤 막기 */
width: 100%; /* 너비를 100%로 고정 */
}
/* 컨테이너의 크기를 제한하여 넘치지 않게 설정 */
.wrapper, .container, .layout, #wrap {
max-width: 100vw; /* 뷰포트 너비를 초과하지 않도록 설정 */
overflow-x: hidden; /* 가로 스크롤 방지 */
}
/* 특정 요소들이 화면을 벗어나지 않도록 처리 */
img, video, iframe {
max-width: 100%;
height: auto; /* 비율 유지 */
display: block; /* 블록 요소로 정렬 */
}
/* 특정 요소의 잘못된 여백 제거 */
* {
box-sizing: border-box; /* 요소의 크기 계산 방식 통일 */
margin: 0;
padding: 0;
}
/* flex 요소가 부모 크기를 넘어서지 않도록 설정 */
.flex-container {
flex-wrap: wrap;
}
＊viewport 메타 태그가 <head> 내부에 올바르게 설정되어 있는지도 확인 (head.sub.php)
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
답변에 대한 댓글 2개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인