[모바일] css로 가로모드시 경고창 띄우기

모바일에서 가로모드시 경고창 띄우기

*반응형이 아닌 적응형 모바일 웹상태에 사용

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){}

실행 -> https://jsfiddle.net/jywoo/3sbu0m9y/2/