HTML&CSS
[모바일] css로 가로모드시 경고창 띄우기
두루루루루
2018. 3. 27. 14:13
모바일에서 가로모드시 경고창 띄우기
*반응형이 아닌 적응형 모바일 웹상태에 사용
CSS 미디어쿼리는 세로 모드(Portrait Mode)와 가로 모드(Landscape Mode)를 조건을 삼을 수 있음
[html]
<div id="landscape">화면을 세로모드로 해주세요.</div> |
[css]
/* 기본 상태 */ #landscape{display:none} /* 가로 모드일때 경고창 */ @media screen and (orientation:landscape){ #landscape{display:block;position:absolute;top:0;left:0;z-index:999;width:100%;height:100%;background:#000;color:#fff} #landscape > span{display:inline-block;width:100%;margin:60% auto;color:#fff;font-size:7vw;font-weight:500;text-align:center;line-height:1.5;} } |
/* 세로 모드에 css를 넣고싶으면 아래 미디어쿼리 조건을 사용*/
@media screen and (orientation : landscape){}
반응형에 적용하려면 모바일 크기를 정해준다음 넣기
-> @media only screen and (device-width: 768px) and (orientation:landscape){}