아이폰 모바일웹에서 가로스크롤생김

css @media 아이폰 조건들..

https://sir.kr/so_css/91

https://www.thewordcracker.com/miscellaneous/pc-%ED%83%9C%EB%B8%94%EB%A6%BF-%EB%AA%A8%EB%B0%94%EC%9D%BC%EC%9A%A9-css-%EB%AF%B8%EB%94%94%EC%96%B4-%EC%BF%BC%EB%A6%ACmedia-query/

https://www.websitehelper.co.uk/css-media-queries-for-tablets-mobiles/

https://developer0809.tistory.com/39

https://stackoverflow.com/questions/58087446/all-media-queries-for-iphone-13-pro-max-mini-and-older-iphones

//iPhone 13 mini
/* 2340x1080 pixels at 476ppi */
@media only screen 
    and (device-width: 375px) 
    and (device-height: 812px) 
    and (-webkit-device-pixel-ratio: 3) { }
 
 //iPhone 13 and iPhone 13 Pro
 /* 2532x1170 pixels at 460ppi */
@media only screen 
    and (device-width: 390px) 
    and (device-height: 844px) 
    and (-webkit-device-pixel-ratio: 3) { }
    
//iPhone 13 Pro Max
/* 2778x1284 pixels at 458ppi */
@media only screen 
    and (device-width: 428px) 
    and (device-height: 926px) 
    and (-webkit-device-pixel-ratio: 3) { }
 
//iPhone 11
/* 1792x828px at 326ppi */
@media only screen 
    and (device-width: 414px) 
    and (device-height: 896px) 
    and (-webkit-device-pixel-ratio: 2) { }

//iPhone 11 Pro
/* 2436x1125px at 458ppi */
@media only screen 
    and (device-width: 375px) 
    and (device-height: 812px) 
    and (-webkit-device-pixel-ratio: 3) { }
    
//iPhone 11 Pro Max
/* 2688x1242px at 458ppi */
@media only screen 
    and (device-width: 414px) 
    and (device-height: 896px) 
    and (-webkit-device-pixel-ratio: 3) { }


/* 아이폰 SE */

@media only screen and (min-device-width : 320px) and (max-device-width : 374px) {

}

/* 스마트폰 모바일(세로) */

@media only screen and (min-device-width : 375px) and (max-device-width : 479px) {

}

/* 스마트폰 모바일(가로) */

@media only screen and (min-device-width : 480px) and (max-device-width : 767px) {

}

/* 태블릿, 아이패드 */

@media only screen and (min-device-width : 768px) and (max-device-width : 1023px) {

}

/* 아이패드 프로 */

@media only screen and (min-device-width : 1024px) and (max-device-width : 1366px) {

}

 

 

내 경우에는 아이폰에서 해당 페이지를 봤을 때

해당 페이지의 내용이 전체 화면을 채우지 못한 경우에

가로 스크롤 (수평 스크롤)이 생기고

이미지가 있는 경우 html영역 밖으로 넘어갔다.. 

그래서 아이폰에서 해당 페이지를 봤을 때 좌우로 흔들거렸다.

 

원인은 해당 페이지의 내용이 너무 적은 경우

그리고 기존 css에서 푸터가 가장 하단에 붙어있지 않고

본문 밑에 붙어있어서.. 왔다갔다했다.

그래서 본문의 크기 역시 어느 정도 정적으로 잡아 줬어야 하는데 

그게 없었던 것 같다..

 

해결법1.

본문영역의 최소 높이 고정.

스크롤도 안 생기고 문제가 해결된 듯 했는데..

푸터가 가장 아래 붙지 않아서 본문이 긴 경우에 겹치는 경우가 있었다.

 

해결법2.

body아래 가장 상위 div 클래스에 대해서 최소 높이를 설정해줬다.

모든 경우에 대해 설정을 할까했는데.

해당 문제가 제기된 아이폰 13프로에 대해서만 적용해두었다.

 

<style type="text/css">
@media only screen
and (device-width : 390px)
and (device-height : 844px)
and (-webkit-device-pixel-ratio : 3){
   .wrapper {
     height : 100vmax;
   } 
}
</style>

 

 

wrapper클래스가 가장 상위 클래스이기 때문에 푸터 영역까지 포함하고 있어서

본문과 푸터가 겹치는 문제도 해결되었다.

 

https://webclub.tistory.com/356

CSS의 7가지 단위 - rem, vh, vw, vmin, vmax, ex, ch

VMAX(Viewport Maximum) : 뷰포트 너비 또는 높이를 기준으로 하는 최대 값입니다.

이번에 찾아보면서 알게된 css단위인데.. 

뭔가 새로운게 많았다.