모바일에서 영카트화면......
본문
모바일에서 영카트화면이 좌우로 움직이는데 움직이지않고 좌우로 움직이지않게 하려면 어떠css코드를 추가해야하나요?
답변 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">
감사합니다. 덕분에 해결 되었습니다.
(●'◡'●)
