Use mídia para determinar o problema encontrado na largura da tela:
No iOS, posso fazê -lo quando giro a tela, mas não respondeu no Android. A tela horizontal ainda mostra meu estilo de tela vertical.
Depois de verificar as informações, se a mídia do CSS3 quiser ter um melhor efeito de exibição no lado móvel, você precisará adicionar esse código ao cabeçalho da página.
<meta name = "viewport" content = "width = largura do dispositivo, escala inicial = 1,0, escala máxima = 1,0, scalable = no">>
Mas não posso usar este código. Porque minha página está adaptada. O tamanho da fonte e o tamanho do estilo podem ser exibidos de acordo com o tamanho da tela. Se eu adicionar este código, minha adaptação não funcionará. Então use outros métodos
Solução:
O dispositivo móvel fornece um evento: Evento OrientationChange
Este evento foi adicionado pela Apple para Safari. Para que os desenvolvedores possam determinar quando o usuário troca o dispositivo da visualização da paisagem para o modo de exibição de retratos.
Este evento será acionado quando o dispositivo girar.
// Ouça para a orientação alterações dewindow.addeventListener ("OrientationChange", function () {// anuncia o novo número de orientação (window.orientation);}, false);Enquanto o usuário alterar o modo de visualização do dispositivo, o evento OrientationChange será acionado. O objeto de evento neste momento não contém nenhuma informação valiosa.
Porque a única informação relevante pode ser acessada através da janela.orientação
atributo de orientação
Tem três valores: 0,90, -90
0 é retrato, -90 significa que o dispositivo gira horizontalmente para o modo paisagem à direita, enquanto 90 significa que o dispositivo gira horizontalmente para o modo paisagem à esquerda.
Há outro que é 180, o que significa a tela vertical, mas é um modo de tela vertical invertido. Mas esse modelo ainda não foi suportado.
Como mostrado na figura:
Portanto, combinando esse evento OrientationChange e a propriedade de orientação da janela, é mais fácil determinar se o dispositivo está em uma tela horizontal ou vertical.
(function () {var init = function () {var updateRientation = function () {var orientation = window.orientation; switch (orientação) {case 90: case -90: orientação = 'paisagem'; // aqui é que o sTATSET é o que é o que é o que é o que é o que é o que é o que é o que é o que é o que é o que é que você estáédico, o mesmo se deve trabalhos, com o objetivo de avaliar que é que é necessário que a empresa seja uma das pessoas. e tela vertical //plusportDocument.body.parentnode.setattribute('class'.orientation);} ;// Este evento é chamado para cada rotação. UpdateRientation ();}; Window.adDeventListener ('DOMCOntentLoaded', init, false);}) ();Portanto, a classe pode ser adicionada de acordo com diferentes estados de rotação, para que nossos CSs possam ser escritos assim
/** O corpo de desempenho mostra vermelho **/. Retrato Body Div {Background: Red;}/** Body Lwidth Mostra azul **/. Paisagem Body Div {Background: Blue;}Outra maneira de escrever é usar consultas de mídia
@media all and (orientação: retrato) {body div {background: vermelho;}} @media all and (orientação: paisagem) {body div {background: blue; }}Esta consulta de mídia de orientação funciona no iOS3.2+ e no Android 2.0+.
Relativamente falando, esse tipo de código é um pouco mais conciso. Com o JS+CSS acima, esse tipo de código é puro CSS. Quando o dispositivo gira, os CSs que alteram a direção serão chamados de acordo com a direção do dispositivo girado.
compatibilidade
Alguns dispositivos não fornecem um evento OrientationChange, mas não acionam o evento de redimensionamento da janela. E se as consultas da mídia não as apoiarem, o que devemos fazer?
Pode ser julgado pelo evento redimensionado. Use a largura interna e o InnerHeight para recuperar o tamanho da tela. A julgar pela comparação de largura e altura, largura e altura são telas verticais e largura e altura são telas horizontais.
O código é o seguinte:
(function () {var updateRientation = function () {var orientation = (window.innerwidth> window.innerHeight)? 'paisagem': 'retrato'; document.body.parentnode.setAttribute ('class', orientação);}; var = function () {updateRientation (); // ouve o evento, outentação); window.addeventListener ('redimensionar', atualização, false);}; window.addeventListener ('domcontentLoaded', init, false);}) ();Dessa forma, podemos ver as mudanças de estilo trazidas pela rotação da tela no navegador.
A combinação dos dois métodos de detecção é a seguinte:
(function () {var suportorientation = (typeof window.orientation === 'número' && typeof window.onorientationChange === 'object'); var init = function () {var htmlNode = document.body.parentnode, orientação; -90: Orientation = 'Paisagem'; Break; Padrão: Orientation = 'Retrato'; Break;}} else {Orientation = (Window.innerwidth> Window.innerHeight)? 'Retrato';} htmlnode.setAttribute ('class', orientação);}; if (supportorientation) {window.addeventListener ('orientação shange', atualização, false);} else {// Ouça o evento de redimensionamento window.addeventListener ('redimensionar', atualização, false);} updateRientation ();}; window.addeventListener ('domcontentloaded', init, false);}) ();Usando esse método, você pode resolver a irritante detecção de tela horizontal e vertical de dispositivos móveis.