GameInformer App과 비슷한 특정 모드의 가로 또는 세로 인 경우 장치를 회전하도록 사용자에게 묻는 방법

Question

가로 모드에서 가장 잘 보이는 웹 사이트가 있습니다. 가로 모드로 웹 사이트를로드하는 경우 사용자가 세로 모드로로드되거나 가로 모드에서 세로 모드로 회전하는 경우 전체 화면을 차지하는 팝업 또는 팝업으로 다시 회전하도록 요청할 수 있습니다. 경치? 생각하는 Javascript/jQuery가 이것을 할 수 있습니다.

사용자가 앱에서 인물을 열거 나 가로에서 세로로 회전하면 화면이 가로로 돌아가도록 요청하는 불투명 이미지가 튀어 나오는 게임 인포머 앱으로 iPad에서이 작업을 수행했습니다. 난 당신이 내가 자바 스크립트를 필요로하지 않으며, 단지 CSS와 함께 할 수있는 솔루션을 제공 할 수 있다고 생각 responsive-design으로 질문을 태그 참조

Answer 1

을 장치가 세로 모드 인 경우에만 표시됩니다.

당신은 미디어 쿼리와 방향을 잡을 수

예 : 만 300 픽셀보다 작은 화면의 회전 상자가 표시됩니다

/* for all screens */ 
#info {display: none;} 

/* only when orientation is in portrait mode */ 
@media all and (orientation:portrait) { 
    #info { 
     display: block; 
    } 
} 

Answer 2

을 [아이 패드 스크린 샷 참조].

가로 및 세로 모드 사이를 전환 할 때 두 개의 서로 다른 화면 크기 사용할 수 있다는 것을 알고, 당신은 보여주기 위해 미디어 쿼리를 사용하여 오버레이 숨길 수 :

HTML :

<div id="content"> 
    <p>Integer velit nulla, condimentum vitae risus ut, rhoncus vulputate quam. Fusce lacus elit, accumsan eu dolor vel, scelerisque pretium turpis. Vivamus ac lectus vitae enim lacinia fringilla vel id tellus. Curabitur pharetra tortor eget risus ornare scelerisque. Morbi tempus et felis vitae venenatis. Suspendisse vitae ultrices est, nec sagittis arcu.</p> 
</div> 

CSS :

를

#rotate { 
    display: none; 
} 

@media screen and (max-width: 300px) { 
    #rotate { 
     background-color: rgba(0,0,0,0.5); 
     display: block; 
     height: 100%; 
     position: absolute; 
     top: 0; 
     width: 100%; 
    } 
} 

이 모든 것은 사용 가능한 너비를 확인하고 300px 이하이면 오버레이하는 콘텐츠를 표시합니다. 사용 가능한 너비가 300px보다 크면 내용을 숨 깁니다. 휴대 기기의 다양한 너비에 대해이 값을 조정하여 세로 또는 가로 모드인지 확인할 수 있습니다.

당신은 미리보기 창을 더 크게 만들기 위해 중간에 수직 막대를 이동하고 작은으로 jsfiddle에서이를 테스트 할 수 있습니다 대신은 대신 스타일 DIV 용기와 CSS를 사용하여 jQuery를/JS의 http://jsfiddle.net/wv6Vp/