Como posso solicitar ao usuário para girar o dispositivo se em um determinado modo paisagem ou retrato, semelhante ao GameInformer App

Eu tenho um site que é melhor visualizado no modo paisagem. Como posso fazer isso? Se o usuário carregar o website no modo paisagem, tudo bem, mas se ele carregar no modo Retrato ou girar do modo Paisagem para o modo Retrato, uma imagem ou algo aparecerá ocupando a canvas inteira, pedindo para girar de volta para panorama? Pensar Javascript / jQuery pode fazer isso.

Eu vi isso feito no meu iPad com o aplicativo Game Informer, onde se o usuário abrir o aplicativo no modo Retrato ou alternar de Paisagem para Retrato, uma imagem opaca será exibida pedindo para que ele volte ao modo paisagem. [veja a captura de canvas do iPad] insira a descrição da imagem aqui

Em vez de jQuery / JS, você pode usar CSS com um contêiner div com estilo, que é exibido apenas quando o dispositivo está no modo retrato.

Você pode pegar a orientação com uma consulta de mídia

Exemplo:

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

Vejo que você marcou a pergunta com o responsive-design então achei que poderia oferecer uma solução que não requer JavaScript e pode ser feita apenas com CSS.

Sabendo que há dois tamanhos de canvas diferentes disponíveis ao alternar entre o modo paisagem e retrato, você pode usar uma consulta de mídia para mostrar e ocultar uma sobreposição:

HTML:

 

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.

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%; } } 

Tudo isso faz é verificar a largura disponível e se é 300px ou menos, ele irá mostrar o conteúdo que sobrepõe. Se a largura disponível for maior que 300px, ela ocultará o conteúdo. Você pode ajustar esse valor para as diferentes larguras de um dispositivo móvel para verificar se ele está no modo retrato ou paisagem.

Você pode testar isso no jsfiddle movendo a barra vertical no meio para tornar a janela de visualização maior e menor: http://jsfiddle.net/wv6Vp/

Intereting Posts