Como julgar
Os dispositivos móveis fornecem dois objetos, um atributo e um evento:
(1) Window.orientação pertence ao atributo anterior do objeto da janela; Existem três valores: 0 é o retrato, 90 é invertido à esquerda e gira para o modo paisagem, -90 é invertido à direita e gira para o modo de paisagem, e o último 180 é se o dispositivo é invertido na parte inferior ou na vertical.
(2) OrientationChange é um evento que acionará este evento quando o dispositivo girar, assim como o evento redimensionado usado no PC.
Quando esses dois são usados juntos, é fácil obter o status horizontal e vertical da tela do dispositivo. O código é o seguinte:
(function () {var init = function () {var updateRientation = function () {var orientation = window.orientation; switch (orientação) {case 90: case -90: orientação = 'paisagista'; quebra; inadimplência: orientação = 'retrato'; quebrar;} // explicar // por exemplo, por exemplo, add: um estado para html = tagsl; Document.Body.parentnode.SetAttribute (Classe ', Orientação);No CSS, você pode escrever desta maneira:
/** Desempenho Div Borda mostra azul **/. Retrato Body Div {Border: 1px Blue sólido;}/** Desempenho Div Borda mostra amarelo **/. Paisagem Body Div {Border: 1px Solid Yellow;}Obviamente, você também pode usar consultas de mídia (recomendado):
@media all and (orientação: retrato) {body div {borda: 1px azul sólido; }}@mídia all and (orientação: paisagem) {body div {borda: 1px Solid Yellow; }}compatibilidade
Como lidar com a situação em que Window.orientação ou OrientationChange não existe no dispositivo? (Geralmente um não existe, o outro não existe, caso contrário)
No desenvolvimento inicial, o modo de modelo de dispositivo do Chrome é frequentemente usado, mas essa propriedade não existe, então como posso obter esse valor? O método simples é julgar com base na comparação de largura e altura. Se a largura for menor que a altura, é uma tela vertical e a largura e a altura são uma tela horizontal.
Eu sei como obter o resultado. A próxima coisa é como ouvir eventos de reversão do dispositivo. Como o OrientationChange não está disponível, use o evento de redimensionamento mais básico ou use o timer para detectá -lo. Por favor, olhe para o código:
(function () {var updateRientation = function () {var orientation = (window.innerwidth> window.innerHeight)? 'paisagem': 'retrato'; document.body.parentnode.setAttribute ('classe', orientação);} var init = function () {atualização (); redimensionar janela de eventos.addeventlistener ('redimensionar', atualização, false);Finalmente, combinar os dois métodos acima é uma solução de detecção completa
(function () {var suportorientation = (typeof window.orientation === 'número' && typeof window.onorientationChange === 'object'); var init = function () {var htmlNode = document.body.parentnode, orientação; -90: Orientação = Paisagem '; Window.AddeventListener ('OrientationChange', Atualização, False);Resumir
Use o evento OrientationChange para monitorar se o dispositivo gira e use a propriedade Window.orientation para determinar se atualmente é uma tela horizontal ou vertical, para executar diferentes operações.